我寫了下面的CSS，用于在按鈕中顯示影像和顏色，但我想減少影像的不透明度，而不是顏色，但如果我試圖將不透明度應用于按鈕，它會減少兩者，我如何才能實作，我可以減少按鈕影像的不透明度，而不是其顏色的不透明度，下面是我的代碼
。.button {
border-radius: 4px;
background-color: #0F69AF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 20px;
width: 100%;
transition: 所有0.5s。
cursor: 指標。
margin: 5px;
font-weight: bold;
background-image: url("./Images/Test.png")。
background-size: cover;
opacity: 0.5。
}
.button span {
padding: 20px;
color: #fff;
font: 18px Arial, sans-serif;
}
.button span: after {
內容。'0bb';
position: absolute;
opacity: 0.5;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span: after {
不透明度。1;
right: 0;
}< div class=" column1" style="width: 60%">
<button class="button"/span>> <a href=" 。 . /test" target="_blank"><span> Test1222<。 span> </a></button>
<br>button class="button"> <a href=" 。 . /test" target="_blank"><span> TEST123<。 span> </a></button>
</div>/span>uj5u.com熱心網友回復：
沒有任何CSS屬性可以讓你只改變背景圖片的不透明度。你需要一個實際的影像--或者一個只作為影像容器的（偽）元素，來應用不透明度。
。.button {
border-radius: 4px;
background-color: #0F69AF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 20px;
width: 100%;
transition: 所有0.5s。
cursor: 指標。
margin: 5px;
font-weight: bold;
/* 需要定位 */
position: relative;
}
.button：:before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url（"//placekitten.com/400/100"）。
background-size: cover;
opacity: 0.5;
content: ''/span>。
}
.button span {
padding: 20px;
color: #fff;
font: 18px Arial, sans-serif;
}
.button span: after {
內容。'0bb';
position: absolute;
opacity: 0.5;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span: after {
不透明度。1;
right: 0;
}< div class=" column1" style="width: 60%">
<button class="button"/span>> <a href=" 。 . /test" target="_blank"><span> Test1222<。 span> </a></button>
<br>button class="button"> <a href=" 。 . /test" target="_blank"><span> TEST123<。 span> </a></button>
</div>/span>uj5u.com熱心網友回復：
你可以使用background-blend-mode: lighten;或其他值，如screen或overlay。重要的是要有（背景色 影像）或兩個不同的影像作為效果的背景。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/321631.html
標籤：