前端——CSS:设置元素背景
设置元素背景一共分为两类,一类是设置元素背景颜色,一类是设置元素背景图片。
1、设置元素背景颜色
元素背景颜色通过background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。该属性可以为所有元素设置背景色,比如body,以及em这类行内元素。
background-color无法被继承,如果不设置颜色,它默认为transparent,即透明背景色。如果该元素有父元素,那么该元素会显示父元素的背景。
语法示例:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> css背景</title>
</head>
<style>
body{background-color:black;}</style>
<body></body>
</html>
效果图如下:
2、设置元素的背景图片
元素背景图片通过background-image属性来为元素设置背景图片。该属性默认值为none,即无背景图像。
语法实例:
body {background-image: url(大海.png);}
背景图片一般是运用在body上,但它的作用范围不局限于body。它也可以对一个段落,或者一个小的div设置背景图片。如下图:
不过,在为元素设置图片背景的时候,需要注意图片的显示方式,比如平铺,重复。
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
如果想要图片在元素进行居中放置等位置定位,可以用位置关键字(center、top、bottom、right、left)来进行调整,此外,也可以用百分数值来对图片位置进行设定。
background-position:50% 50%;
上面的语句可以使图像的中心与其所在元素的中心对齐。但如果只提供一个百分数值,所提供的这个值将用作水平值。此外,background-position 的默认值是 0% 0%,在功能上相当于 top left。这就是背景图像总是从元素内边距区的左上角开始平铺的原因。
当然了,
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。
前端——CSS:设置元素背景相关推荐
- css 设置元素背景为透明
要设置某一元素的背景为透明,在 chrome .firefox.opera 下是这样的: background-color: rgba(0, 0, 0, 0.4); rgba 中的最后一个参数 0.4 ...
- css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数?
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸 参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
- html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
- CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
- 通过css设置canvas背景图片
需要注意的是:canvas和img(做背景的)需要放到一个盒子中,这个盒子需要设置相对位置,而canvas和img需要设置相同的相对位置(父标签的左上角为参考) <!DOCTYPE html&g ...
- CSS设置元素叠加显示
CSS设置元素叠加显示的方式: 方法1:设置负margin: 给元素设置负margin使其移动后 原来的位置是不会保留的 负margin可以让元素的占用空间变小 后面的元素可以覆盖当前的元素 (这里有 ...
- web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码 在阿里iconfont中创建项目 新建项目 搜索自己想要的图标并添加入库 点击购物车 添加至项目 回到"我的项目" ...
- HTML/CSS设置网页背景
目录 一.HTML设置网页背景 1.基础设置 2.背景颜色 3.背景图片 二.CSS设置网页背景 一.HTML设置网页背景 < body >体中使用background和style来设置 ...
- css设置背景颜色/背景图像/背景图像平铺/背景图像位置/背景图像固定显示/综合设置元素背景的方法(学习笔记)
一.设置背景颜色 在CSS当中,网页元素的背景颜色使用background-color属性来设置,和文本颜色的用法类似. 用法 <style>h2{color:red;backround- ...
最新文章
- 我们为什么要分库分表?
- eclipse做java_在Eclipse中使用Java 12
- 科普:算法岗是什么?我适不适合算法岗?选什么方向的算法岗?
- python自动调整格式_pycharm使用技巧之自动调整代码格式总结
- Alexey 大神接棒,YOLOv4 重磅来袭!快来一睹论文真容吧!| 原力计划
- centos crontab环境变量问题
- JAVA获取安卓系统下usb_Android 获取 usb 权限的两种方法
- Python3 类(2)
- jdom.jar 下载
- delphi dbgrideh 行合并_如何轻松快速地合并FLV
- Android之wifi工作流程
- javascript_ES6新特性
- 《天池龙珠 - Python训练营》03.Python基础进阶:从函数到高级魔法方法
- 证券交易金融知识学习(1)
- 教你用Python画一棵圣诞树
- 为什么都瞧不起培训班出来的程序员?
- 商务签证之结局:面试
- 北京信息科技大学考研c语言考试,2018年北京信息科技大学计算机院814数据结构和C语言程序设计[专硕]之C程序设计考研核心题库...
- HBase系列(一):HBase表结构及数据模型的理解
- 抓包分析SSL/TLS连接建立过程