海报设计素材网站免费,做ic贸易去什么网站好,seo人员的职责,宝塔搭建wordpress下面为大家带来一篇CSS background全部汇总。内容挺不错的#xff0c;现在就分享给大家#xff0c;也给大家做个参考。所有背景属性都不能继承。1. background-color所有元素都能设置背景颜色。background-color的默认值是transparent#xff1b;也就是说#xff0c;如果一…下面为大家带来一篇CSS background全部汇总。内容挺不错的现在就分享给大家也给大家做个参考。所有背景属性都不能继承。1. background-color所有元素都能设置背景颜色。background-color的默认值是transparent也就是说如果一个元素没有指定背景颜色那么背景就是透明的这样其祖先元素的背景才能可见。2. background-image所有元素都能设置背景图像背景图像可以设置多个中间用逗号隔开背景图像会层叠写在前面的层次在上面。3. background-repeatrepeat(默认)/no-repeat/repeat-x/ repeat-y4. background-attachmentscroll(默认)/fixed5. background-position像素法以图像左上角为起点第一个值为水平移动的距离第二个值为垂直移动的距离若只规定一个值第二个值默认为50%。百分比法百分比同时应用于图像和元素相应的点重合进行定位。如果只指定一个百分数意味着垂直方向为50%。关键字法top、right、bottom、left、center进行组合定位若只规定一个值第二个值默认为center。注意background-position可以为负值。在默认情况下背景颜色延伸到边框下面背景图像在padding区域的左上角。6. background-size设置背景图像的尺寸默认值为auto。像素法第一个值设置宽度第二个值设置高度若只有一个值第二个值为auto。百分比法以父元素的宽度和高度以基准来计算。关键字cover不改变图像宽高比例在水平和垂直方向都铺满整个元素有可能导致一部分图像溢出。关键字contain不改变图像宽高比例尽可能拉伸直到某一方向铺满整个元素有可能导致另一方向没有铺满。7. background-origin定义背景图像的初始位置border-box边框左上角。padding-boxpadding区域左上角默认值。content-box内容区左上角。8. background-clipThe CSS3 background-clip property specifies the painting area of the background.The property takes three different values:•border-box - (default) the background is painted to the outside edge of the border•padding-box - the background is painted to the outside edge of the padding•content-box - the background is painted within the content box(英文的解释得比较清楚)(英文都是从W3Schools Online搬运)关于background-origin和background-clip它们是相互独立的互不干扰。关于background的CSS写法个人认为应该逻辑明确、层次分明具体而言background定义背景图像background-color定义背景颜色background-clip定义背景显示区域。(个人见解仅供参考)Full Size Background ImageIf we want to have a background image on a website that covers the entire browser window at all times.The requirements are as follows:• Fill the entire page with the image (no white space)• Scale image as needed• Center image on page• Do not cause scrollbarsThe following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:html {background: url(img_flower.jpg) no-repeat center fixed;background-size: cover;}小tips利用背景图像的水平平铺实现波浪式的边框效果。(目前只有想法还没找到符合需求的图像。)以上就是本文的全部内容希望对大家的学习有所帮助更多相关内容请关注PHP中文网相关推荐关于CSS3开启硬件加速的使用和陷阱关于CSS代码如何书写规范
