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
In-depth analysis of Nginx virtual host
Table of contents 1. Virtual Host 1.1 Virtual Hos...
Detailed explanation of MySQL master-slave replication read-write separation construction
MySQL master-slave setup MySQL master-slave repli...
How to get the dynamic number of remaining words in textarea
I encountered a case at work that I had never wri...
MySQL database migration quickly exports and imports large amounts of data
Database migration is a problem we often encounte...
Nginx installation detailed tutorial
1. Brief Introduction of Nginx Nginx is a free, o...
Linux system command notes
This article describes the linux system commands....
Vue keeps the user logged in (various token storage methods)
Table of contents How to set cookies Disadvantage...
CSS delivery address parallelogram line style example code
The code looks like this: // Line style of the pa...
Overview and application of position attributes (absolute|relative|static|fixed) in CSS
Let's first look at the definition of the pos...
Introduction to TypeScript interfaces
Table of contents 1. Interface definition 2. Attr...
Implementation process of the magnifying glass effect in the Javascript example project
Table of contents Preface Case: Imitation of JD.c...
Tutorial diagram of using Jenkins for automated deployment under Windows
Today we will talk about how to use Jenkins+power...
User needs lead to marketing-oriented design
<br />For each of our topics, the team will ...
How to solve nginx 503 Service Temporarily Unavailable
Recently, after refreshing the website, 503 Servi...
Detailed explanation of docker's high availability configuration
Docker Compose Docker Compose divides the managed...