CSS<背景>

smartlion 发布于2019-08-30 15:54 / 3286人阅读

摘要：背景概览有几个很棒的背景属性，它们提供了对背景更强大的控制。规定背景的绘制区域。数值定义设置背景图像的高度和宽度。

1.css3简介

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

2.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;}

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

GPU云服务器云服务器 python &lt&gt java &lt=&gt java&lt &gt asp &lt&gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116865.html

前端基础-CSS的属性相关设置

摘要：值描述左边对齐默认值右对齐居中对齐两端对齐文本装饰为重点值描述默认。继承父元素的属性的值。具体的像素一定要加单位例如，等等第一个值是水平位置，第二个值是垂直位置。单位是像素或任何其他的单位。一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一、字体属性1、font-weight：文字粗细（表格中*为重点）取值描述normal默认值，标准粗细bord粗体 *border...

番茄西红柿 2019-04-23 13:41 评论0 收藏0
CSS<背景>

摘要：背景概览有几个很棒的背景属性，它们提供了对背景更强大的控制。规定背景的绘制区域。数值定义设置背景图像的高度和宽度。1.css3简介 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。 2.css3背景概览有几个很棒的背景属性，它们提...

番茄西红柿 2019-04-23 13:32 评论0 收藏0
html和css的使用方法以及样式

摘要：浮动的元素脱离文档流解决方式一给父元素添加超出部分隐藏解决方式二在父元素内容最后添加拥有清除浮动属性的元素。布局步骤第一步：清除默认样式第二步：划分模块第三步：设置模块的大小以及位置第四步：划分下一级模块html和css引入网页头像 <linkrel="shortcuticon"href="img/...ico">css样式表...

番茄西红柿 2019-04-23 11:46 评论0 收藏0
一个后端开发者的前端语言基础：HTML5 & CSS

摘要：每个标签可有一个独立的号。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。前端语言基础：HTML5 & CSS (一) HTML5：超文本标记语言 (1) 基本概念是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )这些标签以<标签名称>的形式出现，用于标记文本内容的含义浏览器通过元素标...

superPershing 2019-08-30 15:56 评论0 收藏0