


Implementation of CSS background transparency effect_html/css_WEB-ITnose
Jun 24, 2016 am 11:48 AM The description of this effect is not clear, so just go to the picture. Without a picture, there is no truth.
How to achieve the form effect in the picture?
Reply to discussion (solution)
input{opacity: 0.8;}
input{opacity: 0.8;}
I addedopacity:value
There are three layers to consider here:
1. The transparent background image
2. The blue background
3. The transparent effect of the form input box
It’s a bit confusing now. What is important is how to place these three layers. . .
<div class="d1"> <div class="d2"> <form> <input/> </form> </div></div><style> .d1{background:url(http://static.csdn.net/public/common/toolbar/images/f_icon.png)}.d2{opacity: 0.8;background:#00f;width:100%;height:200px;text-align:center;opacity:0.7;} input{background:rgba(255,255,255,200);}</style>
Use PNG image.

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input?

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <iframe> tag? What are the security considerations when using it?

What are the security implications of using iframes, and how can I mitigate them?

What are the best practices for cross-browser compatibility in HTML5?

How do I use the HTML5 <time> element to represent dates and times semantically?

How do I use the HTML5 <meter> element to display numerical data within a range?
