Img semi-transparent processing Img plus semi-transparent background implementation ideas and code
|
Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>mask-layer</title> </head> <style type="text/css"> *{margin:0;padding: 0;} ul{margin:100px auto 0; width:200px;} img{border: 0 none;} li{background-color:#555;list-style: none; width: 146px; height: 220px;} a:hover{opacity: 0.6;} </style> <body> <ul> <li><a href=""><img src="upload/2022/web/64380cd7912397dd9e0581b65982b2b7d0a28707.jpg" alt="" /></a></li> </ul> </body> </html> Principle : add a background to li, the size of li is the size of the image, and change the transparency of a when a:hover |
<<: Analysis of MySQL crash recovery based on Redo Log and Undo Log
>>: This article summarizes the specific use of CSS two-column layout and three-column layout
Recommend
Complete steps of centos cloning linux virtual machine sharing
Preface When a Linux is fully set up, you can use...
Analysis and solution of the reasons why HTML external reference CSS files are not effective
As a front-end novice, I tinkered with the front-e...
MySQL paging performance exploration
Several common paging methods: 1. Escalator metho...
Why not use UTF-8 encoding in MySQL?
MySQL UTF-8 encoding MySQL has supported UTF-8 si...
How to notify users of crontab execution results by email
symptom I set a crontab task on a centos7 host, b...
HTML uses marquee to achieve text scrolling left and right
Copy code The code is as follows: <BODY> //...
Summary of Commonly Used MySQL Commands in Linux Operating System
Here are some common MySQL commands for you: -- S...
JavaScript custom plug-in to implement tab switching function
This article shares the specific code of JavaScri...
How to install and configure the Apache Web server
Learn how to host your own website on Apache, a r...
JavaScript realizes the drag effect of modal box
Here is a case of modal box dragging. The functio...
MySQL 8.0.18 installation tutorial under Windows (illustration)
Download Download address: https://dev.mysql.com/...
Detailed explanation of the principle of js Proxy
Table of contents What is Proxy Mode? Introducing...
How to access the local machine (host machine) in Docker
Question How to access the local database in Dock...
A brief discussion on adaptive layout issues on mobile devices (responsive, rem/em, Js dynamics)
With the popularization of 3G, more and more peop...
Detailed explanation of the box model size depends on its padding, margin, and border values
The box model specifies the size of the element b...