Photoshop Question posted in
The official user guide can be found here.

How to have border with rounded corners as an image and inner background colour to see through? – Photoshop

I have div border with inner rounded corners that I want to replace with an image. The image will have opacity, gradient and other Photoshop effects applied to it.

I also want to have the inner div’s background colour to see through so that the image of the body is visible. Basically I am after a transparent background in the .inner div.

JSFiddle: http://jsfiddle.net/EN2XZ/2/

This is my HTML:

<body>
  <div class="outer">
     <div class="inner">
     ....
     ....
    </div>
  </div>
</body>

CSS:

body {
  background-image:url('image-url');
  background-size:cover;
  background-repeat:no-repeat;
  padding:50px;
}
.outer {
  background-color:#000;
  padding:10px;
}
.inner {
  border-radius:10px;
  background-color:#fff;
  padding:5px 15px;
  color:#0000ff;
}
Tags:

2

Answers


  1. 0

    Am not clear about the image requirement description you gave

    To get a transparent background give background color in rgba
    Rewrite the inner class as

    .inner {
 border-radius:10px;
 background-color:rgba(0,0,0,0.2);
 padding:5px 15px;
 color:#0000ff;

    }

    where the rgba last parameter is the opacity

    Login or Signup to reply.
  2. 0

    Currently, .inner can not be transparent to body because .outer is the next layer behind it, and is solid black, so .inner would be transparent to black.

    You could remove .outer or set background-color: transparent; on it, then set .inner to background-color: rgba(255, 255, 255, .7);

    However that leaves no border. You could add a simple black border with rounded edge by adding it to the .inner class: border: 1px solid #000;

    If you are set on having the outer black box have no radius, and inner have a radius, and have fancy effects, then you can certainly just use an image as you originally intended.

    In Photoshop, make sure your image has some transparency, and save it as a PNG-24 with transparency enabled. The PNG-24 format allows for each pixel to carry over its alpha value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search