CSS opacity 透明效果

CSS opacity 透明效果

<pre style="font-size:22px;"><br />CSS opacity 屬性的功能是用來控制元素的透明效果，<br /> 如 img 、div 、span 、table ... 等元素，<br /> 屬性的語法非常簡單，只需要透過數字的調整。<br /><br />opacity: x : x 從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0。<br /><br /></pre>

00

<style>.flex-container { display: flex; justify-content: center; align-items: center; height: 80%; background-color: DodgerBlue; } </style><div class="flex-container"> <img id="IMG" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg" style="width: 400px;"></div> <div id="range" > <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">0.2</option> <option value="30"></option> <option value="40">0.4</option> <option value="50"></option> <option value="60">0.6</option> <option value="70"></option> <option value="80">0.8</option> <option value="90"></option> <option value="100">1</option> </datalist> <input type="range" step="0.1" list="tickmarks" min="0" max="1" value=1 oninput="showVal(this.value)"></div><span id="volumeBox" >1</span> <script>function showVal(newVal){ volumeBox.innerHTML=" <font size=6 color=blue >    img.style.opacity = "+newVal; IMG.style.opacity = newVal; } showVal(1) </script> <style>#range { width:400px;border: 1px solid black;float:left} #range input {width:99%; -webkit-appearance: none; background: rgba(0%,0%,0%,0); margin: 0 0 0 0; display: flex;height:20px;} #tickmarks{ width:103%; margin: 0 0 0 0; display: flex;} #tickmarks option{ width:410px; font-size: 15px;} input[type=range]:focus { outline: none;} /* --------------- Google Chrome ------------------ */ #range input::-webkit-slider-runnable-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D; } #range input::-webkit-slider-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 20px; cursor: pointer; -webkit-appearance: none;margin: -15px 0 0 0;} /* --------------- Firefox ------------------ */ #range input::-moz-range-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D } #range input::-moz-range-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 10px; cursor: pointer; -moz-appearance: none;} /* --------------- Microsoft Edge ------------------ */ input[type=range]::-ms-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D;} #range input::-ms-thumb { border: 1px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:20px; width: 15px; cursor: pointer; margin: 1px 0 0 0; -webkit-appearance: none; } #range input::-ms-fill-lower { background: #fff; height:2px; border: 1px solid #39404D; border-radius: 2px; } #range input::-ms-fill-upper { background: #fff; height:2px; border: 1px solid #39404D; border-radius: 2px; } </style>

00

#CSS opacity#CSS opacity 透明效果