相关疑难解决方法(0)
如何使用CSS为文本或图像提供透明背景？
是否可以,仅使用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父元素而言.
推荐指数
解决办法
查看次数
设置背景图像的不透明度而不影响子元素
是否可以在不影响子元素不透明度的情况下设置背景图像的不透明度？
例
页脚中的所有链接都需要一个自定义项目符号(背景图像),自定义项目符号的不透明度应为50%.
HTML
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
CSS
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
}
我试过的
我尝试将列表项的不透明度设置为50%,但是链接文本的不透明度也是50% - 并且似乎没有办法重置子元素的不透明度:
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
/* will also set the opacity of the link text */
opacity: 0.5;
}
我也尝试过使用rgba,但这对背景图片没有任何影响:
#footer ul li {
/* rgba doesn't apply to the background image */
background: rgba(255, 255, 255, …推荐指数
解决办法
查看次数
如何在父div中设置不透明度而不影响子div？
嘿,我在谷歌搜索,但我不能完美的答案
我希望父DIV中的不透明度而不是Child DIV
例
HTML
<div class="parent">
<div class="child">
Hello I am child
</div>
</div>
CSS
.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}
注意: -我想要背景图像而Parent Div不是颜色
推荐指数
解决办法
查看次数
儿童div的不透明度是否高于父母的css？
我有一个页面主体的背景,这是一个我希望通过第一级div而不是第二级显示的图像
<body>
<div style='opacity:0.9;'><p>This is a wrapper that shows some of the background</p>
<div style='background-color:#fff;'><p>This is a child div that I want to be all white</p>
</div>
</div>
</body>
显然,第二级div获得了.9的不透明度,还有一种方法可以覆盖它吗？
推荐指数
解决办法
查看次数
CSS加载屏幕问题
我试图在用户的某个动作之后显示加载区域.我想在屏幕中央显示加载动画,同时在后台显示页面的其余部分显示为灰色.
在这一点上,我的问题是加载动画也是灰色的,我只是想让背景变灰.白框应该是不透明的,但也有点透明.有帮助吗？
$('input[type=button]').click(function() {
$("#shader").fadeIn();
});.loadingContainer {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.shader {
width: 100%;
height: 100%;
background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: fixed;
opacity: 0.5;
display: none;
}
#divLoading3 {
border-radius: 40px;
margin: auto;
overflow: hidden;
width: 100%;
height: 100%;
background-color: white;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
} …推荐指数
解决办法
查看次数
如何去除透明色（不透明度）
我有以下代码：
html...
<div id="solidcolor">
<div class="transcolor">transcolor
<div class="notranscolor">some text</div>
</div>
</div>
CSS..
#solidcolor{
background: url("http://i45.tinypic.com/o5aycp.gif") repeat;
width: 200px;
height: 200px;
}
.transcolor{
background: blue;
opacity: 0.4;
height: 100px;
}
.notranscolor{
background: red; /* I want this color to solid color not transparent color*/
}
编辑注释我无法使用 rgba() 方法来设置它的背景颜色，因为我必须设置线性渐变颜色。
编辑1
即使应用绝对定位后，我也无法得到正确的解决方案。但下一个想法我想用 calc() 方法来执行此操作，但它不会退出。任何想法？
编辑2
正如@rokburgar 所说的答案，即使应用绝对位置后我也无法解决我的问题。但我想将不透明度设置为 1.25 我知道这应该是 0 到 1 但他已经声明 0.4 * 1.0 = 0.4 像这样 0.8 * 1.25 = 1 那么为什么它不起作用？
推荐指数
解决办法
查看次数
父div透明背景但不影响子div透明度
<div class="container">
<div class="site_content">
some stuff, images etc
</div>
</div>
.container{
background-color:#333;
}
我想要的是.container div的不透明度为80%,但.site_content的内容为100%
设置css不透明度会影响所有子元素.有办法做到这一点吗？用jQuery？
由于将如何使用,我宁愿避免使用另一个透明div来定位以实现效果的技术.
推荐指数
解决办法
查看次数
将 CSS 不透明度应用于父级，而不是子级
我有一个突出显示单词的句子：
我正在努力使其class="special"可见，其余部分class="sentence"出现在它周围。
几秒钟后，我触发了这个：
setTimeout(() => {
document.getElementById("sentence-1").className += " fadeIn";
}, 2000).sentence {
opacity: 0;
}
.special {
opacity: 1;
}
.fadeIn{
opacity: 1;
transition: opacity 2s 2s;
}<span id="sentence-1" class="sentence">This is the special <span id="special-1" class="special">word</span>, cool huh?</span>在我看来，将不透明度设置.sentence为 0，将不透明度设置.special为 1，然后在触发 javascript 时淡入句子中...
取而代之的是，整个事情都淡化了，我不能一直都.special看得见。
编辑：如果有帮助，我可以访问父元素和子元素的 .class 或 #id ......
推荐指数
解决办法
查看次数
如何制作一个子div不应该从父div继承不透明度？
大家好我创建了一个父div .ima,其中一个div调用.txt当我给出不透明度.ima然后不透明度.txt自动应用这是显而易见的.但我不希望它是这样的.
只.ima应在0.5不透明度和文本输入.txt应100%可见.
有没有办法做到这一点？
这是小提琴
我尝试将不透明度赋予1 .txt不起作用.我可能会以一种我不知道的错误方式这样做.任何帮助？
在这里我提到不同的问题,提到可能的重复
在那里他们已经建议使用rgba但是在这里我不想使用它因为如果我使用rgba那么这将变成黑色或我们将提到的其他颜色.
我想在这里使用背景图片.
这是我提出的样本.
像这样的事情是不可能的.
另外,我不想使用.png图像(半透明).图像可能会发生变化,这就是原因.
感谢那些在这里给出答案的人.
推荐指数
解决办法
查看次数
透明的背景和标志
我想在透明背景黑色中加上一个标识,除了我的标识现在变得透明......这是一个问题.我希望我的徽标和以前一样.
你有什么想法吗？
这是我的HTML
<div class="my-banner">
<img class="banner" src="images/slider.jpg" alt="banniere">
<div class="background-opacity">
<img class="logo" src="images/logo.png" alt="logo" >
</div>
</div>
我的CSS
.banner{
height: 530px;
width: 1366px;
position: absolute;
}
.background-opacity{
background-color: black;
opacity: 0.5;
height: 100px;
width: 1366px;
}
.logo{
padding: 20px 0px 0px 35px;
}
推荐指数
解决办法
查看次数
具有不透明性的容器内没有不透明性的文本
我有一个img黑色覆盖层。覆盖层内有一个opacity和一个白色文本。当我将包装器悬停时，opacity可以看到带有不同文本的红色覆盖层。它工作正常。我唯一的问题是，删除opacity叠加层内的文本。文字是白色的，但也是透明的。我该如何管理它，将文本放在透明容器中而不会对字母/文本产生透明效果？我知道，如果我把文本从这个盒子里拿出来并在中心 id 中设置样式它会起作用。但我想在透明容器中包含文本元素。希望这已经足够清楚了。有任何想法吗？
.wrapper {
position: relative;
width: 300px;
height: 200px;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
cursor: pointer;
}
.overlay-black {
background: black;
opacity: 0.4;
}
.overlay-red {
background: red;
opacity: 0.8;
display: none;
}
.wrapper:hover .overlay-black {
display: none;
}
.wrapper:hover .overlay-red {
display: flex;
}
h2,
p {
color: white;
}
img {
width: 100%;
height: 100%;
} …推荐指数
解决办法
查看次数
去除文本的不透明度
我有以下代码，并为纯色叠加颜色添加了不透明度。问题是文本也在使用不透明度。如何更改它以使文本没有不透明度并位于顶部？
.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"> …推荐指数
解决办法
查看次数
如何仅闪烁背景而不是文本
我只需要闪烁背景颜色，而不是文本。而我却做不到这一点。我需要你的帮助。
.blink{
width:200px;
height: 50px;
background-color: magenta;
padding: 15px;
text-align: center;
line-height: 50px;
}
.text{
font-size: 25px;
font-family: cursive;
color: white;
animation: blink 1s linear infinite;
}
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}<div class="blink">
<span class="text">blinking text</span></div>推荐指数
解决办法
查看次数