CSS<背景>

2018-07-12 admin

1.css3简介

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

2.css3背景

<css3>概览 有几个很棒的背景属性,它们提供了对背景更强大的控制。

  • backgroud-size: 规定背景图片的尺寸。
  • background-orgin:规定背景图片的定位区域。
  • backgroud-clip:规定背景的绘制区域。

<浏览器的支持> Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera (这些浏览器支持css3背景属性)

(1)baground-size(规定背景图片的尺寸)

body{

background: url(给你的背景插入一张图片)
background-size(规定你背景图的大小)
background-repeat(使你的背景图向下延伸)
padding-top(你的背景距离顶部的距离)

} 设置背景尺寸的方式有如上四种方法。 <*数值定义>

设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 auto。 <*百分比>(略)

(2)background-orgin(规定背景图片的定位区域)

body{

background-origin:content-box;(背景图像填充框的相对位置)

background-origin:border-box;(背景图像边界框的相对位置)

background-origin:padding-box;(背景图像的相对位置的内容框)

} 背景图的位置

(3)backgroud-clip(规定背景的绘制区域)

body{

background-clip:content-box;背景绘制在内容方框内(剪切成内容方框)
background-clip:padding-box; 背景绘制在衬距方框内(剪切成衬距方框)
background-clip:border-box;默认值。背景绘制在边框方框内(剪切成边框方框)
}

附:###背景- 简写属性###

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

注:以上内容若有错误请及时告诉我。

原文链接:https://segmentfault.com/a/1190000015605876

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35808.html

文章标题:CSS<背景>

相关文章
canvas实现流星雨的背景效果
看到一个很棒的流星雨效果。修改一下样式就可以作为网页背景了。。! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot...
2017-03-09
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
javascript背景时钟实现方法
本文实例讲述了javascript背景时钟实现方法。分享给大家供大家参考。具体如下: 以下是这个效果的全部代码。[最好从一个空页面开始] &lt;html&gt; &lt;head&gt; &lt;TITLE&gt;背景时钟&lt;&#x2...
2017-03-24
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下: &#x2F;** * 动态导入静态资源文件js&#x2F;css *&#x2F; var $import = fu...
2017-03-27
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
javascript实现随时变化着的背景颜色
很简单的一段背景颜色时刻发生变化的代码 &lt;!doctype html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&q...
2017-03-22
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下: 首先来看一下运行效果图: 具体实现代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W...
2017-03-23
JavaScript让网页出现渐隐渐显背景颜色的方法
本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法。分享给大家供大家参考。具体如下: &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot...
2017-03-22
js实现点击按钮后给Div图层设置随机背景颜色的方法
本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法。分享给大家供大家参考。具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 &lt;!DOCTYPE html&gt; &lt;html&gt; ...
2017-03-23
回到顶部