身体不透明度不影响身体背景颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了身体不透明度不影响身体背景颜色相关的知识，希望对你有一定的参考价值。
我试图在身体上设置不透明度。但是，我遇到了一个问题。
在正文上设置不透明度时，只会影响其内容。背景不受不透明度的影响。
$("button").click(function() {
$("body").toggleClass("opacity");
});* {
box-sizing: border-box;
}
body {
background: linear-gradient(to right, #1BBCB1, #37B9E9);
font-family: 'Arial';
margin: 0;
text-align: center;
opacity: 1;
}
body.opacity {
opacity: .3;
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller then 1</p>
<button>Toggle opacity</button>当在div上做同样的事情时它工作正常。
$("button").click(function() {
$("div").toggleClass("opacity");
});* {
box-sizing: border-box;
}
body {
font-family: 'Arial';
margin: 0;
text-align: center;
}
div {
background: linear-gradient(to right, #1BBCB1, #37B9E9);
opacity: 1;
}
div.opacity {
opacity: .3;
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>The background gradient disapears when I set the opacity smaller than 1</p>
<button>Toggle opacity</button>
</div>但我不能用div这样做。我必须在body上设置它。如何使不透明度影响身体的背景？
附：新年快乐！
答案
这是因为body的背景传播到html元素（因为这个没有背景集），因此html也具有相同的body背景。在你的情况下，不透明度也适用于背景，但你只是看到一个html元素。
在html中添加背景以查看差异：
$("button").click(function() {
$("body").toggleClass("opacity");
});* {
box-sizing: border-box;
}
html {
background:red;
}
body {
background: linear-gradient(to right, #1BBCB1, #37B9E9);
font-family: 'Arial';
margin: 0;
text-align: center;
opacity: 1;
}
body.opacity {
opacity: .3;
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller then 1</p>
<button>Toggle opacity</button>另一答案
使用rgba()作为线性渐变颜色。这样你就可以设置颜色的透明度。默认情况下，Alpha透明度值设置为1（a.k.a。100％不透明度=无透明度）。然后将值更改为小于1的值，以使背景变为半透明。
注意：此解决方案仅影响背景而不影响子元素。其中，可能是也可能不是预期的结果。
$("button").click(function() {
$("body").toggleClass("opacity");
});* {
box-sizing: border-box;
}
body {
background: linear-gradient(to right, rgba(27, 188, 177, 1), rgba(55, 185, 233, 1));
font-family: 'Arial';
margin: 0;
text-align: center;
opacity: 1;
}
body.opacity {
background: linear-gradient(to right, rgba(27, 188, 177, 0.3), rgba(55, 185, 233, 0.3));
}
button {
background-color: transparent;
border: 2px solid #000;
border-radius: 3px;
margin-top: 15px;
padding: 10px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller than 1</p>
<button>Toggle opacity</button>另一答案
据我所知，身体的不透明度属性不存在。所以你可以用这样的东西获得所需的效果：
https://codepen.io/calexandru/pen/YYQLmW
$( function () {
$("#target").on("click", function() {
$('body').addClass('opacity-container');
});
} );.opacity-container::after {
/*CSS*/
content: "";
background: url(https://firebasestorage.googleapis.com/v0/b/betaproject-8a669.appspot.com/o/Quote-Generator%2F1.jpg?alt=media&token=4de18117-665f-4166-9111-4401af0cd555);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the button for background with opacity</p>
<button id="target">Click me</button>以上是关于身体不透明度不影响身体背景颜色的主要内容，如果未能解决你的问题，请参考以下文章