CSS样式表之background背景
【CSS常用背景属性】：background （缩写形式）
background-color：背景色
background-image：背景图 url中放图片地址，背景图和背景色同时存在时，背景图覆盖背景色
background-repeat：背景图的重复方式
属性： no-repeat不平铺，一般要选择不平铺；repeat-x水平平铺；repeat-y垂直平铺；repeat平铺（默认）
background-position：位置坐标、偏移量
》》指定位置：left、center、reight top、center、bottom;
当只写一个属性时，另一个默认居中
》》填写坐标：水平位置 垂直位置（像素/百分比）
当只写一个属性值时，默认写的是水平方向，另一个垂直居中
水平方向：正数右移 负数左移
垂直方向：正数下移 负数上移
使用百分比时，代表去掉图片后，剩余空白区域距离比例
background-clip：裁切背景图和背景色显示区域。
border-box从边框外边缘开始显示；
padding-box从边框内边缘开始显示；
content-box从文字内容区开始显示；不在显示区域的背景图或背景色，会被裁切不显示
不改变定位位置，只是通过裁切显示部分区域
background-origin：设置背景图的定位方式。
border-box从边框外边缘开始；
padding-box从边框内边缘开始；
content-box从文字内容区开始
不改变背景图显示区域大小，只决定左上角定位位置
background-size:宽 高
【指定宽高】①直接写像素 ②百分比
》》当只有一个属性值时，默认为宽度、高度等比缩放
当有两个属性时，会按照指定的高度宽度进行压缩/拉伸处理
【其他属性值】
》》contain:图片等比缩放，缩放到宽或高的某一边等于父容器为止，另一边按比例缩放（可能导致部分空余区域无法覆盖）
》》cover:图片等比缩放，使背景图完全覆盖背景区域（可能导致背景图部分区域无法显示）
<head>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
border: 20px solid greenyellow;
background-color: red;
background-image: url(练习用图/rBACFFIdyU2hFpbmAAAe2AYDs5o148_200x200_3.jpg);
/*背景图覆盖背景色*/
background-repeat: no-repeat;
/*background-size: cover;*/
/*background-position: center;*/
background-position: 60px 10px;
}
.div2{
width: 300px;
height: 300px;
background-color: red;
padding: 30px;
border: 20px blue dotted;
background-image: url(练习用图/caccdb85f2881a0b!200x200.jpg);
background-repeat: no-repeat;
background-origin: content-box;
background-clip: padding-box;
}
#ul{
width: 1000px;
} </style>
</head>
<body>
<div class="div1"> </div>
<div class="div2"> 什么能坚持坚持坚持坚持坚持坚持坚持几年男方女方你快点快点康复费能否
</div> </body>
CSS样式表之background背景的更多相关文章
- 深度理解CSS样式表，内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- HTML基础（三）——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
随机推荐
- 用cv::Scalar来设置opencv中图片的颜色
1 怎样使用cv::Scalar来设置opencv中的颜色 cv::Scalar的构造函数是cv::Scalar(v1, v2, v3, v4),前面的三个参数是依次设置BGR的,和RGB相反,第四个 ...
- Natas Wargame Level20 Writeup（会话状态注入/篡改）
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArMAAACmCAYAAADJYwcaAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF
- python 列表、元组、字符串、字典、集合、return等梳理
有必要对这些数据类型及操作做下梳理: 1.列表:增删改查 a.查找: >>> names=["zhang","wang","li&q ...
- 将非官方扩展程序加入chrome的白名单
参考来源:http://xclient.info/a/1ddd2a3a-d34b-b568-c0d0-c31a95f0b309.html com.google.Chrome.mobileconfig ...
- 二、 添加控制器Controller（ASP.NET MVC5 系列）
MVC是Model-View-Controller的简写.MVC是一种开发良好架构,可测试,易维护应用程序的设计模式.据于MVC的应用程序应该包含: Models: 是呈现应用程序数据和使用验证逻辑给 ...
- SmartCoder每日站立会议05
1.站立会议内容 经过四天的努力,我们的微信小程序有了很大的进展,首页的设计定了方案,API接地图正在试着把消息展示到其中,争取把地图信息做到直观形象. 站立会议照片: 2.任务展板 3.燃尽图
- Unity游戏程序员面试题及解答
典型的一些如手写排序算法.一些基本数学问题,在此就不列举了.以下整理出一些代表性的.有参考价值的题,真实面试题,附有本人的解答,欢迎讨论. 题1.指出下列哪些属于值类型? int System.Obj ...
- NodeJs的简单介绍
Nodejs是由谷歌v8运行.c++编写的js运行的环境,这里需要记住的是Nodejs只是一个环境. 目前很多主流网站都是使用nodejs,如知乎等大型的网站. 我们关于nodejs学习目标:安装N ...
- 【数据库】Mean web开发 04-MongoDB在Linux上的安装及遇到的问题
简介 Mean是JavaScript的全栈开发框架.更多介绍 用MongoDB实现持久数据的存储是Mean Web全栈开发中的一部分. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...
- Python： Pandas的DataFrame如何按指定list排序
本文首发于微信公众号“Python数据之道”(ID:PyDataRoad) 前言 写这篇文章的起由是有一天微信上一位朋友问到一个问题,问题大体意思概述如下: 现在有一个pandas的Series和一个 ...