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
mysql code to implement sequence function
MySQL implements sequence function 1. Create a se...
JavaScript to implement click to switch verification code and verification
This article shares the specific code of JavaScri...
Detailed explanation of JavaScript data types
Table of contents 1. Literals 1.1 Numeric literal...
How to build a complete samba server in Linux (centos version)
Preface smb is the name of a protocol that can be...
In-depth understanding of JavaScript event execution mechanism
Table of contents Preface The principle of browse...
Setting up shadowsocks+polipo global proxy in Linux environment
1. Install shadowsocks sudo apt-get install pytho...
Design Story: The Security Guard Who Can't Remember License Plates
<br />In order to manage the vehicles enteri...
jQuery plugin to implement floating menu
Learn a jQuery plugin every day - floating menu, ...
A brief analysis of the issues that should be paid attention to when making 404 error pages
When optimizing a website, we must learn to use e...
How to hide the text in the a tag and display the image? Compatible with 360 mode rendering
Often you will encounter a style of <a> tag ...
Detailed tutorial on migrating the home directory to a new partition under Ubuntu
When the user's home directory becomes larger...
MySQL data operation-use of DML statements
illustrate DML (Data Manipulation Language) refer...
Let's learn about MySQL database
Table of contents 1. What is a database? 2. Class...
How to configure VMware multi-node environment
This tutorial uses CentOS 7 64-bit. Allocate 2GB ...
JS ES6 asynchronous solution
Table of contents Initially using the callback fu...