是否可以,仅使用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.
#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内容的情况下改变背景图像的不透明度？"
我搜索得太多了,我找不到解决这个问题的好答案!
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;}
我试图使我的背景图像透明,并且页面的其余部分不透明,例如在非褪色HTML和CSS之上的褪色背景图像.
我有一个HTML页面,使用div作为背景图像.以下是该页面的简化版本:
<HTML>
<head>
<style type="text/css">
#backgroundImage {
background-image: url('../Documents/images/Sea.jpg');
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.4;
filter:alpha(opacity=40);
height:100%;
width:100%;
z-index:0.1;
}
.main{
height:500px;
width:900px;
margin:auto;
background-color:green;
z-index:1;
opacity: 1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div id="backgroundImage">
<div class="main">
</div>
</div>
</body>
我在以下问题中找到了此设置:
如何在不使内容(图像和文本)透明的情况下使我的网站背景透明？
它几乎可以工作,除了整个页面是透明的,而不仅仅是背景图像.
我已经尝试调整'main'div上的Z-index和opacity,但它不起作用.
我觉得这是一个简单的修复,但我无法看到解决方案.
我也试过这个问题,但它似乎没有提供解决方案:
还有这个:
我没有足够的声誉来发布我想要实现的图像.
我想要实现的目标听起来很简单，但我无法让它发挥作用。
我正在尝试添加opacity到顶部，image以便< h1 >标签更易于阅读。
这是我的 HTML：
<header>
<section>
<div class="img_content">
<div class="bg_img" style="background-image: url('path-to-image');" >
<div class="container">
<h1 class="content_h1">Most Popular Lunches: Week 11</h1>
</div>
</div>
</div>
</section>
</header>
这是 CSS：
/*Custom CSS */
.img_content {
/* background: url(); */
background-repeat: no-repeat;
background-size: cover;
}
header section{
padding:0;
}
@media screen and (max-width: 768px){
.content_h1 {
font-size: 40px;
padding: 21% 0;
color: white;
font-size: 14px;
}
.section_details {
padding: 8% 0 19% 8%;
font-size: 14px; …有一个固定的位置div（即div_fixed）。另一个div就是other_content在div_fixed。该other_contentdiv有一个padding-top属性，这样当页面滚动只在other_content滚动的固定格下面。
小提琴在这里
HTML：
<div class="div_fixed">FIXED</div>
<div class="other_content">
content goes here<br/>
content goes here<br/>
content goes here<br/>
</div>
CSS：
div { color: #fff }
.div_fixed { position: fixed;
width: 100%;
height: 100px;
}
.other_content {
background: #f00;
height: 5000px;
color: #fff;
padding-top: 100px;
margin:0 auto;
}
但是我希望非固定div停留在固定div上，并且希望非固定div消失在其上边缘下方，即非固定div的上边缘的位置将保持固定，但其内容将在页面滚动中消失就像它停留在固定div下方时的情况一样。
因此，在非固定div之前，我对html进行了一些编辑（仅2个中断）：
<div class="div_fixed">FIXED</div>
<br><br/>
<div class="other_content">
content goes here<br/>
content goes here<br/>
content goes here<br/>
</div>
CSS中的添加项是： …
我有一个背景图像,必须通过foverin和foverout效果对悬停事件进行动画处理.我怎么能这样做？
我有以下代码，并为纯色叠加颜色添加了不透明度。问题是文本也在使用不透明度。如何更改它以使文本没有不透明度并位于顶部？
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
opacity: .5;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}<div class="container">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
<div class="overlay"> …