css属性background

一、background-size

  1.具体设定的px值,及北背景图片的具体宽高

  2.设定的百分比,相对于容器的宽高

  3.设定三个铺设类型:

    (1)cover: 以宽 / 高 为基本,尽可能的去铺满整个容器,溢出部分截掉

    (2)contain:以宽 / 高 为基本,尽可能的去铺满整个容器,但要求不能溢出容器

二、background-repeat: repeat / no-repeat; 一张图片无法铺满整个容器时,是否重复图片平铺

三、background-position:

  1、具体两个px值,设定的为相对于容器左上角的偏移值

  2、两个百分比值: 计算公式为 (容器的宽度 - 背景图片的宽度) * 百分比 ,高度类推即可

  3.left, right, top, bottom, 分别相当于 第一个百分比的 0% ,100%,第二个百分比的 0%,100%

  4.center, 相当于百分比的50%

  注意: background-position必须要写两个值,不能系一个值来代替两个相同的值

  

时间: 2024-10-22 04:45:48

css属性background的相关文章

css属性 background

background 在一个声明中设置所有的背景属性. background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 设置元素的背景图像. background-position 设置背景图像的开始位置. background-repeat 设置是否及如何重复背景图像. background-clip 规定背景的绘制区域. background-origin 规定背景图片的定

css中background背景属性概

css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*

css中background背景属性概述

background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ background:url(背景图片路径)

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的使用方法

背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值,透明) color(指定的颜色,和文本颜色的设置方法相同) 示例: body {background-color: black;} h1 {background-color: #00ff00;} h2 {background-color: transparent;} p {background-c

CSS背景属性Background详解

本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. css2 中的背景(background) CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色. background-image: 引用图片作为背景. background-position: 指定元素背景图片的位置. background-repeat: 决定是否

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

我的项目8 css属性,实现阅读器重排版功能

对于小说阅读器,相信兄弟们都很熟悉,那么它是如何实现的呢?早这里分享一些经验之谈. 首先,在我的思路中,在制定多页,和重排版功能的实现,可能需要用到CSS3的一个属性:column-count:3(多列)思路是这样的,也不知道对不对,用HTML5+CSS3写一个可阅读的文本,然后用column-count属性进行分列,在移动端里,那么一本书就相当于一个页面,而每一页则相当于一列,而通过改变column-count的值则实现了重排版功能.不多说分享示例代码. <!DOCTYPE html PUBL

CSS属性

CSS样式属性 一.字体 1.font-family:Tahoma,Arial,"Hiragino Sans GB";字体,第一种字体不能显示时,用第二种字体 2.font-size:xx-small or 10px字体大小:绝对大小:xx-small.x-small.medium.large.x-large.xx-large.x-large.xx-l相对大小:large smaller 使用数字和度量单位绝对单位:px:显示器像素个数mm.cm.in:毫米 厘米 英寸,使用这类单位,