Proficient in CSS + DIV webpage style and layout-image effects, cssdiv

Proficient in CSS + DIV webpage style and layout-image effects, cssdiv

When it comes to image effects, friends may think of meitu xiuxiu, ps, etc. These software are very good photo processing software, including commonly used: black and white, enhancement, Gaussian, high contrast, night vision, old photos and pencil strokes. Whether you are a professional photo photographer or not, we can use the photo processing software to easily achieve the desired photo effect. In this blog, I will continue to summarize the effect of CSS + DIV for analysis. If you are interested, click the following link, learn about the basic CSS knowledge that I have explained before:
Proficient in CSS + DIV webpage style and layout -- Preliminary Exploration of CSS
Proficient in CSS + DIV webpage style and layout-CSS text effects
Proficient in CSS + DIV webpage style and layout-CSS section Effects
In the previous blog, I explained the section-related knowledge. This time I will talk about the effects of images. We can see how to control the effects of image display. First, let's look at a figure:

Next, let's explain each knowledge point in the context of the above illustration to better understand the actual situation:

Image Effects

Image border

First, let's look at the code and running effect of an example:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> The effect is as follows:


Analyze the above Code: border-style: controls the line style (click to draw a line or a dotted line); border-color: clearly controls the color; border-width: controls the Border width. At the same time, when border controls the border, it can not only use the method in the code, but also combine all the code into a sentence. We can write the code and the running effect is as follows:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> In this way, it becomes very concise. Let's look at the effect:


Border also has a powerful function to modify a single border. For example, if we write code like this, what is the display effect? nie:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> 

The display effect is as follows:

This makes our design easier. Next, let's take a look at the zooming. The sample code and running effect are as follows:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> 
Analyze the code above. The Code 50% indicates that the width of the current image is 50% to the width of its parent element body, that is, she is half the width of the entire browser. She can ensure that different browsers will not change the entire webpage because of her changes, and she will always maintain a relative width with the browser. The image effect is as follows:
Image Scaling

Image Alignment
Horizontal Alignment
In terms of horizontal and vertical alignment, we first look at horizontal alignment: We use text-align to achieve this effect, to see the code and display results:



<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> 

The effect is as follows:

Vertical Alignment is not like horizontal alignment. There are many vertical alignment values. We compare these values one by one. Let's look at the Code:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> 

The running effect is as follows:


Text Mixing
Text: Let's start with the code:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px; "> The effect is as follows:


We have adopted the first-character zoom-in effect, the text-text mixed display effect, the image and text are well mixed, which is the same as the word text mixed display. Let's go back and look at the code. We can see that the effect of the text surrounding image is the same as that of the first word amplification, and float: left is used. In fact, it is equivalent to regard text as an image or an image as text, and the first word is also sunk.

Note:This blog post briefly summarizes the effect of image settings in CSS. It consists of three parts: Image style, image alignment, and image-text mixing, the image style includes the border effect of the image and the zoom effect of the image. border-style: controls the line style (whether it is a dotted line or a dotted line); border-color: clearly, it is about controlling the color. border-width: controls the border width, horizontal and vertical alignment of the image, as well as text-and-image mixing, and the knowledge of these small details, we also need to practice it in the code to better master this knowledge, BS learning, To be continued ......