[英]Reduce opacity of background-image in a <select />
如代碼段所示,我有一個帶有自定義向下箭頭圖標的<select />
作為background-image
如下所示:
select { display: block; width: 100%; max-width: 100%; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: transparent; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100% ); background-repeat: no-repeat, repeat; background-position: right 0.7em top 50%, 0 0; background-size: 0.65em auto, 100%; } <!-- begin snippet: js hide: false console: true babel: false -->
<select> <option value="" hidden>Status</option> <option>Status1</option> <option>Status2</option> <option>Status3</option> </select>
我想要實現的是使向下箭頭圖標變亮,並且僅在懸停時將其變暗。 我試過將background-image
作為::before
但沒有運氣..
select { display: block; width: 100%; max-width: 100%; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .select:hover.select:before{ content: ""; position: absolute; width: 1rem; height: 100%; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100% ); background-repeat: no-repeat, repeat; top: 2px; right: 8px; }
<div class="select"> <select> <option value="" hidden>Status</option> <option>Status1</option> <option>Status2</option> <option>Status3</option> </select> </div>
下面的代碼將解決問題
.select:hover.select:before
<div class="select">
<select>
<option value="" hidden>Status</option>
<option>Status1</option>
<option>Status2</option>
<option>Status3</option>
</select>
</div>
select {
display: block;
width: 100%;
max-width: 100%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.select:hover.select:before{
content: "";
position: absolute;
width: 1rem;
height: 100%;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 100%
);
background-repeat: no-repeat, repeat;
top: 2px;
right: 8px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.