是否可以,仅使用CSS,使background元素半透明但元素的内容(文本和图像)不透明？
我想在不将文本和背景作为两个单独元素的情况下实现此目的.
尝试时:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>看起来子元素受父母的不透明度影响,因此opacity:1相对于opacity:0.6父元素而言.
我不想从CSS中的父级继承子不透明度.
我有一个div是父,我在第一个div里面有另一个div,就是孩子.
我想在父div中设置opacity属性,但我不希望子div继承opacity属性.
我怎样才能做到这一点？
我正在使用:after和:beforecss伪元素,它在IE8和所有现代浏览器中工作正常,但它在IE7中工作不正常.在IE7中有没有可以解决这个问题？
我有一个带有文本块的div元素和一个父div,我在其中设置了一个背景图像.现在我想减少背景图像的不透明度.请建议我如何做到这一点.
提前致谢.
编辑:
我希望通过编辑html内容来改变我的博客文章对blogger.com的看法.html代码如下所示:
<div>
//my blog post
</div>
我尝试用div元素包围上面的整个代码,并分别设置每个div的不透明度,如下所示:
<div style="background-image:url("image.jpg"); opacity:0.5;">
<div style="opacity:1;">
//my blog post
</div>
</div>
但它没有用.
我有以下css.
#mypass{
background-image: url("Images/logo.png");
background-attachment: fixed;
background-position:140px 100px ;
background-size: 100px;
background-repeat: no-repeat;
opacity:0.5;
fileter:alpha(opacity=40);
color: blue;
}
我用这个作为
<div id="mypass">
<center><h2>PRAGATI ENGINEERING COLLEGE</h2>
<h5>1-378,ADB Road,Surampalem-533437,E.G.Dist.,ph:08852-252233</h5></center>
<% out.println("________________________________________________________");
String photo="Image/"+id+".jpeg";
System.out.println(photo);
String yy="";
int y=((1900+d.getYear())-(Integer.parseInt(id.substring(0, 2))+2000))+1 ;
switch(y){
case 1: yy=y+" st";break;
case 2: yy=y+" rd";break;
case 3: yy=y+" rd";break;
case 4: yy=y+" th";break;
default: yy=y+" th";
}
int branch=Integer.parseInt(id.substring(6,8));
System.out.println(branch);
switch(branch){
case 12:yy+=" IT";break;
case 05:yy+=" CSE";break;
case 03:yy+=" MECH";break;
case 02:yy+=" EEE";break;
case 04:yy+=" ECE";break;
default:yy+="PEC";
}
%> …我希望div有一个透明的背景.
我尝试使用background-color和这样做opacity,但问题是边框和文本内部也变得透明.这里的例子.
这可以在不使用透明PNG背景图像的情况下实现吗？
我想知道"如何在不改变div内容的情况下改变背景图像的不透明度？"
我搜索得太多了,我找不到解决这个问题的好答案!
HTML
<div class="div-1">
<h2>title</h2>
<p>text</p></div>
CSS
.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}
我在 css 中向 html 元素添加了背景图像，以便它随着 Web 浏览器的大小而扩展。我将此 html 元素中的不透明度更改为 0.5。我想将子元素（特别是 h1 和段落元素）更改回不透明度 1，以便文本不透明。这不起作用。请帮忙 ：）
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<p id ="topBar"></p>
<h1>Heading</h1>
<h3>Name</h3>
<p>
Paragraph
</p>
<h3>Heading</h3>
<p>More text</p>
<h3>Send us an email!</h3>
<form>
<input style ="width:200px" type="email" placeholder ="Email" name="email"><br><br>
<textarea style ="height:100px;width:200px"placeholder = "Message" name="message"></textarea><br><br>
<input type="submit" value ="Send" name="send">
</form>
<p id ="bottomBar"></p>
</body>
</html>
CSS：
html {
background: url(pen.jpg) no-repeat center fixed;
background-size: cover;
font-family: …嘿,我想知道你们中是否有人遇到过类似的问题？我正在网页的广告部分工作,它有一个非常酷的背景,我想继续进入元素的部分,所以我有一个框,一个框的rss提供到网站上的更新,然后我有一个广告框.这是我的HTML:
<div class="side">
<div id="ad">
bla
</div>
<div id="rss_news">
double bla
</div>
</div>
和css:
.side {
float: left;
background-color: black;
width: 300px;
min-height: 710px;
padding: 0 0 0 0px;
margin-top: 25px;
border: 1px solid white;
border-radius: 8px 8px 8px 8px;
opacity: 0.3;
}
#ad {
border: 1px solid blue;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
#rss_news {
border: 1px solid yellow;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
正如你所看到的那样,正如我所期待的那样,侧面阶级将他的属性嵌入他的内部.有没有办法,我能以某种方式告诉其他id标签忽略不透明度？
提前致谢
我正在尝试使背景图像透明(没有制作透明PNG或更亮图像的选项,图像经常更改).
background: url(image.jpg) no-repeat center center / cover;
opacity: 0.2;
得到了图像,但DIV中的所有内容都是透明的.我已经搜索了一个解决方案,但似乎无法实现正确的解决方案.关于如何修复它的任何指针？