html5 - CSS 背景问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

html5 - CSS 背景问题

伊谢尔伦 2017-04-17 11:35:50

[HTML讨论组]

756

一：

HTML部分

<p class="article-top"></p>

CSS部分

.article-top {
    background: url("img/3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

二：

HTML部分

<p class="article-top" style="background: url('img/3.jpg');"></p>

CSS部分

.article-top {
    /*background: url("img/3.jpg");*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

为什么第二种情况把 background-image 放到 p 里面后 background-repeat background-position background-size 等等会失效呢？

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(3)

阿神2017-04-17 11:37:50 3楼

第二部分的style应该使用 background-image 属性。

<p class="article-top" style="background-image: url('img/3.jpg');"></p>

赞 +0

添加回复

大家讲道理2017-04-17 11:37:50 2楼

我来说一下原因吧
第一种情况

    background: url("img/3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

能使你的页面呈现想要的效果是因为 background-repeat background-position background-size这些属性覆盖了background: url("img/3.jpg");默认的 repeat position 等等属性

第二种情况是因为按照优先级问题 dom style>css文件所以你设置在css中的那些都不起作用

设置成background-image: url('img/3.jpg'); 后 css中的那些属性就起作用了

知识点：css优先级问题+复合属性问题

赞 +0

添加回复

巴扎黑2017-04-17 11:37:50 1楼

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>