CSS如何设置div背景透明度且兼容性良好:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
设置对象的透明度在很多网页特效中都有实用,设置对象的透明度并不难,唯一的难点可能就是如何兼容各大主流浏览器,下面就简单介绍一下如何实现此效果。代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } .opacity{ width:150px; height:150px; background-color:green; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; margin-left:20px; margin-top:20px; } span{ display:block; width:80px; height:80px; } </style> </head> <body> <div class="opacity"> <span>蚂蚁部落</span> </div> </body> </html>
上面的代码实现了各个浏览器的兼容。起透明效果的代码如下:
filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;
第一行代码仅能在IE浏览器中有效。
第二行代码支持老版本的FF浏览器,其实去掉也可以,因为老版本的浏览器使用率很少了。
第三行能够支持各大浏览器,但是IE6-IE8浏览器不支持。
特别说明:
虽然实现了背景透明,但div中的文字也呈现为透明状态,这往往不是想要的,可以参阅如何设置div的透明度但是其中的文字不透明一章节解决此问题。
原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=4680

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

Issues with native select on mobile phones When developing applications on mobile devices, we often encounter scenarios where users need to make choices. Although native sel...


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 Chinese version
Chinese version, very easy to use

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
