The place where the problem was found:
When simulating the Baidu homepage for production, there is a small camera in Baidu's search text box. This camera is part of a picture. When the mouse moves to this place, it automatically switches to the lower half of the picture. Part of it is discolored, and the reference of this image is the reference of the background-image used, but the img tag cannot achieve this effect. Why is this?
img element: Defined to embed an image into a web page. Technically, tags don't insert images into web pages, they link images from web pages.
The tag creates a placeholder for the referenced image.
Background-image: url(): The definition is that this property is to set the background image, the background of the element occupies the full size of the element . Include padding and borders, but not margins.
Focus on explaining the following two sentences:
First of all, it should be clear that the running order of the html file is to load the html structure first and then load and modify the css.
1: The label is a structural language, he creates a placeholder space for the referenced image, I liken this behavior to blowing up a balloon,
how big the balloon (structure) is is determined by the gas he blows into it (the referenced image) . The size of this structure is determined by the content inside. 2: background-image. The definition requires "the background of the element occupies the full size of the element". The attribute is to create a background image for the element, and this element is very important! If the full size of the element is zero, how should this background fit? I liken this property to putting something (background image) in a box (element). If the size of the box is zero, how can your things (background image) fit in? So if you want to put a picture in, you must make the box have a size, that is, the width and height of the box cannot be zero! So by extension, the element that can accommodate this background image must be a block element with a width and height that are not 0. 【Why do you have to have specific width and height?】
/*input2的css代码*/
.input2 img {
display:inline-block;
background-position:0;
width: 20px;
height: 20px;
position: absolute;
margin-left: -30px;
margin-top: 10px;
background-repeat: no-repeat;
}
.input2 img:hover {
background-position: 0 -20px;
}
<!--img引入图片-->
<div class="input2">
<input class="search-word" type="text" name="question">
<img src="camera.png" alt="照相机图片"/>
<input class="search-button" type="button" value="百度一下">
</div>/*input1的css代码*/
.input1 span {
display:inline-block;
background-image: url(camera.png);
width: 20px;
height: 20px;
position: absolute;
margin-left: -30px;
margin-top: 10px;
background-repeat: no-repeat;
}
.input1 span:hover {
background-position: 0 -20px;
}
<!--css引入图标-->
<div class="input1">
<input class="search-word" type="text" name="question">
<span></span>
<input class="search-button" type="button" value="百度一下">
</div>
This explanation is a bit repetitive, but let me talk about my understanding of this in conjunction with the loading order. My understanding is: background-image is referenced in css, which is different from img tag. When an html file is loaded, the html structure is loaded first, so the image in the img tag will be loaded and displayed directly in the structure, but it is different when the image is referenced in css. If the label left for the reference image in the body is empty, then the image will not be displayed. The reason is mentioned above. How can you put things in the box whose size is zero? (The display of the background image is completely determined by the size of your element)/*css代码*/
.k {
background-color: yellow;
height:100px;
}
.k span {
display:inline-block;
height:100px;
width:100px;
background-image: url(position.jpg);
background-repeat: no-repeat;
}
<!-- 图片定位显示其中的小图标 -->
<div class="k">
<span>kakaka</span>
</div>
/*css代码。当元素不为空，但是没有设置高度和宽度时*/
.k {
background-color: yellow;
height:100px;
}
.k span {
display:inline-block;
background-image: url(position.jpg);
background-repeat: no-repeat;
}
<!-- 图片定位显示其中的小图标 -->
<div class="k">
<span>kakaka</span>
</div>
[How to determine/adjust the position of the referenced picture with determined width and height? ]
Use background-position to adjust the position of the background image. It has two values that represent the distance that the background image moves along the x and y axes. When I was studying other people's blogs, I made my own way of judging the position of this movement. Summary and memory method: First of all, it is clear that the initial image display area coincides with the upper left corner of the parent image. We can recall that when moving the position of an image in css, we often use margin to manipulate the image position: use margin-top: (negative number); margin-left (negative number) to move up and left. So similarly in background-position: xy; the attribute values x and y are often negative numbers; I think it is easier to understand this memory. (As shown in the figure) [The difference between the two application scenarios] It is usually a non-content image, or if you want to refer to a part of the icon in the image, use background-image to write it in css (the element used to modify the page), if it is content The image is written in the html using the img tag.
/*css代码，当鼠标移动到照相机时，变换背景图片区域*/
.input1 span:hover {
background-position: 0 -20px;
}
