Home  >  Article  >  Web Front-end  >  css background-size 属性_html/css_WEB-ITnose

css background-size 属性_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:531052browse

The background-size attribute specifies the size of the background image.

Syntax
background-size: length|percentage|cover|contain;
length sets the height and width of the background image.
The first value sets the width and the second value sets the height.
If only one value is set, the second value will be set to "auto".

percentage sets the width and height of the background image as a percentage of the parent element. The first value sets the width and the second value sets the height. If only one value is set, the second value will be set to "auto".

cover Expands the background image to be large enough so that the background image completely covers the background area. Some parts of the background image may not be displayed in the background anchor area.

contain Expands the image image to its maximum size so that its width and height fit completely within the content area.

Default value: auto
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.backgroundSize="60px 80px"

IE9, Firefox 4, Opera, Chrome, and Safari 5 support the background-size attribute.

Example 1:

<!DOCTYPE html><html><head><style> div{background:url(/i/bg_flower.gif);background-size:35% 100%;-moz-background-size:35% 100%; /* 老版本的 Firefox */background-repeat:no-repeat;}</style></head><body><div><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></div></body></html>


Example 2:

<!DOCTYPE html><html><head><style> div{background:url(/i/bg_flower.gif);background-size:25%;border:2px solid #92b901;}</style></head><body><div><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div></body></html>



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