将图片作为背景

最新推荐文章于 2023-01-06 15:53:59 发布

加鸡腿

最新推荐文章于 2023-01-06 15:53:59 发布

阅读量518

点赞数

分类专栏： css 文章标签：将图片作为背景 img background

本文链接：https://blog.csdn.net/qq_43437571/article/details/96132547

版权

css 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是<img>标签。

这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。

img {
    width: 500px;
    height: 200px;
}

div {
    width: 500px;
    height: 200px;
    background: url('timg.jpg');
    background-position: center center;
    background-size: cover;
}

section {
    float: left;
    margin: 15px;
}

<section>
    <p>Img element</p>
    <img src="timg.jpg" alt="bicycle">
</section>

<section>
    <p>Div with background image</p>
    <div></div>
</section>