Analysis of the cutting of the background image of the nine-square grid with adaptive width and height
|
<br />Based on the original width-and-height adaptive nine-grid layout, we made some optimizations, changing eight background image requests to one to reduce network costs. In fact, these are just some simple tips. If you are very strict about cutting pictures, there will be problems if there is a 1px asymmetry. Please pay attention to the cutting analysis of the example below. RAR: module.zip Instructions : Image cutting analysis  The key is to use a partially transparent background image and add an extra <SPAN> tag to read the background for each adaptively extended XHTML part, so as to fill in the extended background on the left or right or up and down in a staggered manner. To solve the problem that IE fails to reach 100% height, the left and right extension heights are written as 3000px absolute value units (adjusted according to needs). shortcoming : The background image must be transparent, so JPG format images cannot be used. (I hope someone can solve this problem) |
<<: Detailed explanation of how to configure openGauss database in docker
>>: MySQL permission control details analysis
Recommend
How to create a child process in nodejs
Table of contents Introduction Child Process Crea...
Detailed explanation of Nginx status monitoring and log analysis
1. Nginx status monitoring Nginx provides a built...
Notes on Using Textarea
Why mention textarea specifically? Because the tex...
Teach you the detailed process of using Docker to build the Chinese version of gitlab community
1. Use Docker Compose to configure startup If you...
Solve the error problem of warnings potentially fixable with the `--fix` option when running a Vue project
Problem: vue-cil3 runs with warnings potentially ...
How to implement responsive layout in vue-cli
When we are doing front-end development, we will ...
Details of the order in which MySQL reads my.cnf
Table of contents The order in which MySQL reads ...
Implementation of adding remark information to mysql
Preface Some people have asked me some MySQL note...
MySQL compressed package version zip installation configuration method
There are some problems with the compressed versi...
Perfect solution to Docker Alpine image time zone problem
Recently, when I was using Docker to deploy a Jav...
How to view image information in Docker
In this article, we will need to learn how to vie...
6 inheritance methods of JS advanced ES6
Table of contents 1. Prototype chain inheritance ...
Detailed explanation of MySQL trigger trigger example
Table of contents What is a trigger Create a trig...
Detailed explanation of several horizontal and vertical centering methods in HTML (Basics)
Preface When we were writing the horse, I guess e...
Tomcat8 uses cronolog to split Catalina.Out logs
background If the catalina.out log file generated...