html怎么叠加透明图片,css – 您可以在图片上叠加透明div

2024-05-09 13:16:10

当然，这里是一个跨浏览器的方式：

div.imageSub { position: relative; }

div.imageSub img { z-index: 1; }

div.imageSub div {

position: absolute;

left: 15%;

right: 15%;

bottom: 0;

padding: 4px;

height: 16px;

line-height: 16px;

text-align: center;

overflow: hidden;

}

div.imageSub div.blackbg {

z-index: 2;

background-color: #000;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

filter: alpha(opacity=50);

opacity: 0.5;

}

div.imageSub div.label {

z-index: 3;

color: white;

}

Label Goes Here

此方法不需要JavaScript，不会导致在IE中丢失ClearType文本，并且与Firefox，Safari，Opera，IE6,7,8 …兼容。不幸的是，它只适用于一行文本。如果您想要多行，请调整div.imageSub div的height和line-height属性，或者使用以下(修改CSS并要求指定两次标签)。

div.imageSub { position: relative; }

div.imageSub img { z-index: 1; }

div.imageSub div {

position: absolute;

left: 15%;

right: 15%;

bottom: 0;

padding: 4px;

}

div.imageSub div.blackbg {

z-index: 2;

color: #000;

background-color: #000;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

filter: alpha(opacity=50);

opacity: 0.5;

}

div.imageSub div.label {

z-index: 3;

color: white;

}

Label Goes Here

Label Goes Here

html怎么叠加透明图片,css – 您可以在图片上叠加透明div相关推荐

div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)
CSS实现文字半透明显示在图片上方法在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
php如何平铺背景图片,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css中设置文字环绕图片,css 设置文字环绕图片
要达到的效果是可以环绕图片最近做的一个项目,有一个具体的要求,是要完成文字对图片的环绕效果,其实不是很难:来做一份随笔,记录一下该做法,大家有什么好的实现方式,也可以互相探讨一下. 这是我自己写的一 ...
html css设置背景图片,css background之设置图片为背景技巧
Bac公斤round是什么含义,翻译过来有配景意义.异样在css内中作为css属性一成员同样是有后援含义,何况是设置装备摆设后盾图片.布景色调.布景图片截取等款式. 起首先来看看bac公斤round有 ...
css图片精灵定位_CSS精灵图片(CSS sprite)使用心得(转)
引言: 提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通过C ...
css图片精灵定位_CSS精灵图片(CSS sprite)使用心得
有引言: 提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通 ...
CSS如何使得img图片设置无色透明
在学习css时候,有的时候我们遇到的背景照片我们可以用css 的混合属性来让白底的图片成透明显示,这样我们在图片底下定义任意背景色,就相当于图片换了背景色,而不用在PS里换背景.由于是css定义的,基 ...
Qt 视频上叠加透明图片
Qt 视频上叠加透明图片最近公司需要一个上位机软件,主要是全屏显示视频,在视频上面叠加透明图片. 调试了很多种方法,效果都不如意,主要是因为Qt 窗口背景不能被覆盖,透明背景,又不能播放视频. 我调 ...

最新文章

热门文章