CSS中存放图片的标签有哪些

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中存放图片的标签有哪些?常见的有三种,分别是img标签、background-image属性和content属性。下面我们来依次介绍。 1. img标签img标签是最基本的展示图片的标签,在HT

CSS中存放图片的标签有哪些?常见的有三种,分别是img标签、background-image属性和content属性。下面我们来依次介绍。

1. img标签

img标签是最基本的展示图片的标签,在HTML中使用,但也可以在CSS中使用,如下所示:

img{
    content: url('images/bg.jpg');
    width: 100px;
    height: 100px;
} 

在这里使用了content属性来展示图片,同时也可以设置图片的宽高等其他属性。

2. background-image属性

background-image属性常用于背景图片的展示,可以通过CSS样式直接嵌入图片,如下所示:

div{
    background-image: url('images/bg.jpg');
    width: 100px;
    height: 100px;
} 

在这里通过div标签的background-image属性来设置背景图片,并设置了宽高等其他属性。

3. content属性

content属性一般用于通过伪元素来展示图片,如下所示:

div::after{
    content: url('images/bg.jpg');
    width: 100px;
    height: 100px;
} 

在这里通过div标签的::after伪元素来展示图片,并设置了宽高等其他属性。

总结:

以上三种方式都可以用于CSS中展示图片,具体使用哪种方式可以根据实际情况来判断,其中background-image属性是最常用的方式。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: CSS中存放图片的标签有哪些

粉丝

0

关注

0

收藏

0

已有0次打赏