[英]How to put a partially transparent image above another image in html?
I want to place an image above another image so that when I make my second image partially transparent first image will be seen. 我想在另一个图像上方放置一个图像,以便当我使第二个图像部分透明时可以看到第一个图像。 But I do not want to use background image for first image as
但是我不想将背景图像用作第一张图像
<div style="background-image: url("firstImage.png");">
<img src="secondImage.png"/>
</div>
as it is much obvious. 很明显。 Is there any technique to put another image on first image without making first image as background image.
是否有任何技术可以将另一张图像放在第一张图像上而不将第一张图像作为背景图像。
Were going to use css for this. 将为此使用css。 The
position
statement allows for absolute
and relative
positioning. position
语句允许absolute
和relative
定位。
By setting position:absolute
we can position the element relative to the document's (0,0). 通过设置
position:absolute
我们可以相对于文档的(0,0)定位元素。 Then you can use top
, bottom
, left
, right
to further position the element relative to those edges. 然后,您可以使用
top
, bottom
, left
, right
相对于这些边缘进一步定位元素。
position:relative
is similar to the default positioning of HTML elements. position:relative
与HTML元素的默认位置类似。 However, by adding position:relative
to the parent of an absolute
positioned element, we force it to use the partent's (0,0), rather then the document's. 但是,通过
position:relative
对于absolute
定位元素的父元素添加position:relative
:,我们强制其使用partent的(0,0),而不是文档的。
.layered-image { position: relative; } .layered-image img { height: 200px; width: 300px; } .image-overlay { position: absolute; top: 30px; left: 30px; opacity: .4 }
<div class="layered-image"> <img class="image-base" src="http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" alt=""/> <img class="image-overlay" src="https://newevolutiondesigns.com/images/freebies/city-wallpaper-47.jpg" alt="" /> </div>
A side note: While z-index
can be useful, i try to avoid it whenever possible. 旁注:尽管
z-index
可能有用,但我会尽可能避免使用它。 It causes some nasty bugs in the latest versions of webkit, especially safari's implementation in iOS. 它会在最新版本的Webkit中引起一些讨厌的错误,尤其是Safari在iOS中的实现。 If you order your html elements properly, there is no need for using
z-index
. 如果您正确地订购html元素,则无需使用
z-index
。 Except of course, when you must. 当然,除了必须的时候。
try this : 尝试这个 :
<div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
<img src="firstImage.png" alt=.. width=.. height=..style="position: relative; z-index: 1;" />
<img src="secondImage.png" alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
</div>
Please check below link 请检查以下链接
http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
You will get what you want by using simple css changes & opacity feature 您将通过使用简单的CSS更改和不透明度功能来获得所需的内容
Put the image tags in the container, and first make the positions to absolute afterwards set the z-index property of back or front image then set the ocupacy of the image. 将图像标签放入容器中,首先将位置设置为绝对位置,然后设置背面或正面图像的z-index属性,然后设置图像的透明度。
img { width: 300px; height: 300px; position: absolute; } img.front { z-index: 2 opacity: 0.6; filter: alpha(opacity=60); } img.back { z-index: 1 }
<div> <img class="back" src="http://all4desktop.com/data_images/original/4237684-images.jpg" /> <img class="front" src="http://www.hdwallpapery.com/static/images/creativity_water_spray_drops_flower_rose_desktop_images_TVIdSpG.jpg" /> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.