关于CSS背景background属性经典的配置

background

background-color: transparent;
background-image: url("/assets/images/phonetitle1.gif");
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;

1、background-color: transparent;

  设置元素的背景颜色

  属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

  尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。

2、background-image: url("/assets/images/phonetitle1.gif");

3、background-repeat: repeat;

4、background-attachment: scroll;

属性设置背景图像是否固定或者随着页面的其余部分滚动。

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。

5、background-position: 0% 0%;

设置背景图像的起始位置。

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0% 0%。

x% y%
第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。

xpos ypos
第一个值是水平位置,第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用 % 和 position 值。

6、background-clip: border-box;

  背景的绘制区域。

  背景被裁剪到边框盒。border-box

  背景被裁剪到内边距框。padding-box

  背景被裁剪到内容框。content-box

7、background-origin: padding-box;

  

8、background-size: auto auto;

规定背景图像的尺寸。

                      background-size: length|percentage|cover|contain;
length
设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage
以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
时间: 2024-09-29 18:00:16

关于CSS背景background属性经典的配置的相关文章

CSS 背景background实例

css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Css background背景语法 CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || back

CSS背景background、background-position使用详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性). css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性,它们是: * p

CSS背景颜色属性值转换

<!DOCTYPE html> <html><head><meta charset="UTF-8"> <title>CSS背景颜色属性值转换</title> <style type="text/css"> .top_tips { position:relative; width:1000px; margin:20px auto; padding:10px; color:#272727

CSS中background属性详解

CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-color:#色码; 背景色彩 Exp: background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF; background-color : tra CSS背景属性 background css 说明 background-imag

CSS之background属性

css背景是个很有意思的东西,可设置 背景色:background-color 背景图:backgoround-image 背景图显示相对位置:background-position,正数图片往右下移,负数图片向左上移 背景图片示例:(每张图片高度50px,空白处50px) 示例: 1.背景色: css文件代码 .c1{ width: 100%; height: 50px; background-color: #425a66; } html代码,跟下面的所有情况一样,后面就不再写了 <body>

css背景background

background用来定义html元素的背景效果 background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法 1.十六进制方式,如"#ff0000" 2.RGB方式,如"rgb(255,0,0)" 3.颜色名称,如"red" background-image:定义元素的背景图片,通过background-image:url('path/图片名称')指定 默认情况下,背景图片会在水平和垂直方向上进行平铺重复显示,即默认的

web前端入门到实战:CSS背景background

1.背景颜色 background-color 取值:合法的颜色值和transparent 注:背景颜色和背景图片,填充都是从边框开始 2.背景图片 background-image:url(图片路径) 3.背景图平铺 background-repeat: 取值: repeat:平铺 no-repeat:不平铺 repeat-x:水平方向平铺 repeat-y:垂直方向平铺 4.背景图定位 background-posion:x y,设定的值都是相对于浏览器,不是相对于容器 取值: (1):x,

css背景属性

CSS背景: 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置为背景. background-position 设置背景图像的起始位置. background-repeat 设置背景图像是否及如何重复. 1.背景色:background-color属性,设置元素的背景颜色: <

CSS的核心属性和浮动

1.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符(Selector)和声明(Decleration) 注:声明又包括属性(Properyt)和属性值(Value) 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150多个属性: 3)css属性值:属性值包括法定属性值和常规的数值加单位.   div{width:400px;} 2.文本字体属性 1)文本大小:{font-size:12px/14px/16px;} 说明: 1)属性值为