Home >Web Front-end >HTML Tutorial >multiple backgrounds multiple backgrounds_html/css_WEB-ITnose
multiple backgrounds multiple backgrounds_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:041172browse
The syntax abbreviation is as follows:
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
Note: Use commas to separate the abbreviated values of each group of background; if there is a size value, it needs to be followed closely by position And separated by "/"; when decomposing the writing method, only one background-color can be set.
For example:
background:url(./image.jpg) no-repeat left top / 200px 70px,url(./image.jpg) no-repeat right bottom / 150px 60px;
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>多重背景</title><style type="text/css">.demo { width: 300px; height: 140px; border: 1px solid #999; background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top / 200px 70px, url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 150px 60px;}</style> </head> <body><div class="demo"></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