上一篇: 检查基础表示是否为OWL或RDFS 下一篇:html – 如何仅在嵌套的ul中悬停...

html – 背景覆盖背景大小

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 背景覆盖背景大小，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我已经知道我的问题的解决方案,但我想知道为什么会这样.为什么背景会覆盖背景大小？请不要写关于交叉浏览.

<div class="icon"></div>

CSS

.icon {
    height: 60px;
    width: 60px;
    BACkground-size: 60px 60px;
    BACkground: transparent url("icon.png") no-repeat 0 0;

}

DEMO

http://jsfiddle.net/K74sw/2/

解

在背景下插入背景大小的说明

解决方法

设置尺寸后,背景会重置图像位置.

原因是因为’BACkground’属性是一个简写属性,用于在样式表中的同一位置设置大多数背景属性.
也是背景大小,这是您之前尝试使用的大小.

你用

BACkground-size: 60px 60px;

BACkground: transparent url("icon.png") no-repeat 0 0;

这意味着：

BACkground-size: 60px 60px;  /*You try to set bg-size*/

BACkground-color: transparent ;
BACkground-position: 0% 0%;
BACkground-size: auto auto; /* it resets here */
BACkground-repeat: no-repeat no-repeat;
BACkground-clip: border-box;
BACkground-origin: padding-box;
BACkground-attachment: scroll;
BACkground-image: url("icon.png");

因此,您可以尝试使用单独的背景-…设置

所以要么使用：

BACkground-size: 100% 100%;
BACkground-image: url("http://1.bp.blogspot.com/-T3EviK7nK1s/TzEq90xiJCI/AAAAAAAABCg/OMZsUBxuMf0/s400/smilelaughuy0.png");
BACkground-repeat:no-repeat;
BACkground-position:0 0;

http://jsfiddle.net/K74sw/9/

或者只是换掉你的线.

http://jsfiddle.net/K74sw/10/