Can css selector insert images?

藏色散人
Release: 2020-12-21 09:52:07
Original
3665 people have browsed it

css selectors can insert pictures, such as CSS selectors ":before" and ":after". The insertion method is to use the content attribute to insert pictures, using syntax such as ".p_beforeImg:before {content: ' '; background..."}.

Can css selector insert images?

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.

Recommended: "css Video Tutorial"

CSS selectors: before and :after can use the content attribute to insert images.

The content attribute is used with the :before and :after pseudo-elements to insert generated content at the head or tail of the element.

Description: This attribute is used to define the generated content placed before or after the element. By default, this is often inline content, but the type of box this content creates can be controlled using the display attribute.

Understand: before and: after

Default display: inline;

The content attribute must be set, otherwise everything will be in vain, and the content attribute can only be applied to: before and :after pseudo-element;

Default user-select: none, that is, the content of :before and :after cannot be selected by the user;

Pseudo-elements can be used in combination with pseudo-classes, such as:. target:hover:after.

:before and :after were proposed in CSS2, so they are compatible with IE8;

::before and ::after are written in CSS3, in order to distinguish pseudo classes and pseudo elements Open;

Other pseudo-elements in CSS include::before, ::after, ::first-letter, ::first-line, ::selection, etc.;

Not available through DOM Use, it's just pure appearance. In special cases, the generated content is not supported by current screen reading from an access perspective.

Example 1: Add a triangular tip image through before

    css3  

通过before添加三角尖图片

Copy after login

Rendering:

Can css selector insert images?

Example 2:

Replace "before" with "after" and insert the image style with just one click

.p_afterImg { background: #eeeeee; width: 200px; height: 80px; border-radius: 6px; padding: 10px 20px; position: relative; } .p_afterImg:after { content: ''; background: url('../img/triangle_down.png') no-repeat bottom right /32px 16px;/*兼容没测*/ position: absolute; bottom: -15px; z-index: 2; width: 32px; height: 16px; }
Copy after login

Effect picture:

Can css selector insert images?

The above is the detailed content of Can css selector insert images?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!