Home >Web Front-end >CSS Tutorial >Can css selector insert images?

Can css selector insert images?

藏色散人Original: 2020-12-21 09:51:513780browse

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..."}.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3</title>
    <style type="text/css">
        .p_beforeImg {
            background: #eeeeee;
            width: 200px;
            height: 80px;
            border-radius: 6px;
            padding: 10px 20px;
            position: relative;
        }
        .p_beforeImg:before {
            content: &#39;&#39;;
            background: url(&#39;../img/triangle_up.png&#39;) no-repeat top left /32px 16px;/*兼容没测*/
            position: absolute;
            top: -15px;
            z-index: 2;
            width: 32px;
            height: 16px;
        }
    </style>
</head>
<body>
    <p class="p_beforeImg">通过before添加三角尖图片</p>
</body>
</html>

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: &#39;&#39;;
        background: url(&#39;../img/triangle_down.png&#39;) no-repeat bottom right /32px 16px;/*兼容没测*/
        position: absolute;
        bottom: -15px;
        z-index: 2;
        width: 32px;
        height: 16px;
    }

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!

html5 css css3 子类 select dom 选择器 display 伪类伪元素 background

Statement：

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

Previous article：Comparison functions in CSS: max(), min(), clamp()Next article：Comparison functions in CSS: max(), min(), clamp()

See more

Can css selector insert images?

Related articles