All geek questions in one place

Alpha border inside image

I am trying to create a border inside the image instead of the outer part of the image. I want to do this because I would like to put an alpha value on the border so that I can see the image across the border.

I tried to place the div a few pixels smaller than the image around the image, and then set "overflow: none". The border is now inside the image, but when I apply alpha to the border, nothing is visible across the border, because overflow is set to none.

On the other hand. If I do not set "overflow", the border will not be displayed.

I need something like this:

alt text

+3
source share
2 answers

firefox ie8 ( ie8, ):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>test</title>
        <style type="text/css">
            .imgcontainer{padding:0; position: relative; 
                        display: inline-block; overflow: hidden;}
            .imgcontainer img{display:block;}
            .borders, .borders2{position: absolute; width:100%; height:100%;
                        border: 4px solid #000;}
            .borders{opacity: .5;}
            .borders2{bottom: 4px; right: 4px;}
        </style>
    </head>
    <body>
        <div class="imgcontainer">
            <div class="borders"><div class="borders2"></div></div>
            <img src="img" />
        </div>  
    </body>
    </html>

4 , . divs, . divs, , , .

jsfiddle: http://jsfiddle.net/Xb37w/2/

0

rgba (255,255,255,.5) .

0

Source: https://habr.com/ru/post/1767773/

More articles:


All Articles