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

The specific implementation of div not automatically wrapping and forcing not wrapping in html

Blog

Img semi-transparent processing Img plus semi-transparent background implementation ideas and code

The button has a gray border that is ugly. How to remove it?

How to use JavaScript strategy pattern to validate forms

Docker large-scale project containerization transformation

The specific implementation of div not automatically wrapping and forcing not wrapping in html

Rounding operation of datetime field in MySQL

Brief analysis of centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

How to import/save/load/delete images locally in Docker

JavaScript canvas to achieve raindrop effect

A brief discussion on the binary family of JS

WeChat applet implements a simple handwritten signature component

Recommend

How to Install and Configure Postfix Mail Server on CentOS 8

Detailed installation and configuration tutorial of PostgreSQL 11 under CentOS7

MySQL SQL statement analysis and query optimization detailed explanation

Mysql solution to improve the efficiency of copying large data tables

How to deploy k8s in docker

MySQL 5.7.27 installation and configuration method graphic tutorial

CSS3 realizes the animation of shuttle starry sky

Detailed explanation of several ways to remove the gap between inline-block elements in CSS

How to use @media in mobile adaptive styles

Tutorial on how to install and use Ceph distributed software under Linux

Detailed explanation of Linux zabbix agent deployment and configuration methods

Vue Element-ui form validation rule implementation

How to implement CSS mask full screen center alignment

Summary of important mysql log files

Detailed explanation of virtual DOM in Vue source code analysis