css设置背景颜色/背景图像/背景图像平铺/背景图像位置/背景图像固定显示/综合设置元素背景的方法(学习笔记)
一、设置背景颜色
在CSS当中,网页元素的背景颜色使用background-color
属性来设置,和文本颜色的用法类似。
用法
<style>h2{color:red;backround-color:blue;font-family:"黑体"}body{background-color:blue;/*设置整个网页的背景颜色*/}
</style>
二、背景图像的设置方法
css中将图像作为网页元素的背景,可以用backguound-image
属性添加
<style>body{background-image:url(图像路径)/*将指定图像平铺显示为整个页面背景*/
}
</style>
注意:背景图片会覆盖背景颜色
三、背景图像的平铺的属性值
默认情况下背景图像会自动沿着水平和竖直两个方向平铺,如果想改变平铺方式,可使用如下属性:
background-repeat:沿水平和竖直两个方向平铺(默认值)
background-no-repeat:不平铺,图像位于元素左上角,只显示一次
repeat-x:沿水平方向平铺
repeat-y:沿竖直方向平铺
用法:
body{background-image:url("meishi.jpg");background-repeat: repeat-y;}
四、背景图像位置的设置方法
background-position
属性用于设置背景图像的定位方式;
位置属性取值 | 含义与写法 |
---|---|
像素单位数值 |
图像左上角在元素的具体坐标background-position:20px(水平距离) 20px(竖直距离);
|
预定义的关键字 |
水平方向:left/center/right 、垂直方向:top/center/bottom
|
百分比取值 |
0% 0% :图像左上角与元素左上角对齐、50% 50% 图像50% 50%中心的点与元素50% 50%中心的对齐
|
用法:
body{background-image:url("图片路径");background-repeat: repeat-y;background-position: left center;/*图像位置属性*/}
五、背景图像的固定显示
如果网页元素过多,则背景图像会随着元素一同滚动,这是可以使用background-attachment
属性固定背景的元素;
含义 | 固定属性取值 |
---|---|
scroll | 图像随页面元素滚动(默认值) |
fixed | 图像固定在页面,不随页面元素滚动 |
六、综合设置元素的背景
在CSS中,
背景属性、padding、margin
都是复合属性,可以将背景相关的杨树综合在一个复合属性background
中
写法:
background:背景色 url(“图像”) 平铺定位 固定;
如:
body{background: url(xxx.jpg) no-repeat 50px 80px fixed;
}
css设置背景颜色/背景图像/背景图像平铺/背景图像位置/背景图像固定显示/综合设置元素背景的方法(学习笔记)相关推荐
- CSS的元素显示模式、盒子模型、背景(颜色、图片、平铺、图片位置、图像固定)
文章目录 1.CSS的元素显示模式 1.1 什么是元素显示模式 1.2 块元素 1.3 行内元素 1.4 行内块元素 1.5 元素显示模式总结 1.6 元素显示模式转换 2.盒子模型:网页布局的基础 ...
- 一、css清除浮动方法学习笔记总结(超详细,简单易懂)
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
- python改背景颜色_Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
!!!本博客,是对图像的背景颜色的修改的基础讲解~!!! 还包括一个练习--是对背景色修改的一点应用尝试!!!--始终相信学习多一点探索,脚步会更坚定一些~ 愿所有正在努力的人都可以坚持自己的路一直走 ...
- 让div背景图片自动拉伸,而不是平铺!超简单!
无法拉伸!但是可以用 background-repeat:no-repeat;这个方法来 控制背景不会平铺! 或者将你上面的代码改为 <div id="BgImg" styl ...
- 解决网页背景图片高度无法达到100%平铺界面问题
网页背景图片无法根据浏览器大小实现宽度100%的情况: 通过css属性来实现一种视觉错觉来实现高度100% body{background: #c0c0c0;background-image: url ...
- img图片实现背景图片的效果、img平铺、object-fit
最近公司做了一个项目,当时用的img图片标签,做的是一个头像,一想到头像宽高不确定 又要铺满整个相框 还不能变形 和背景图片差不多,自己琢磨着写了半天的js,判断宽高呀啥的,能力不足,未果... 看了 ...
- pythongui显示图片_opencv2.4.13+python2.7学习笔记--opencv中的Gui特性--图片:读图像,显示图像,保存图像...
#-*- coding: utf-8 -*- """Created on Tue Mar 14 19:39:11 2017 @author: Thinkpad" ...
- 7.OpenCvSharp图像的文件夹的批量读取、表单显示及多图拼接——c#OpenCvSharp学习笔记
0.项目概述 项目实现了基于OpenCvSharp进行基本的的图像多图批量拼接,可批量读取在同一个文件内多个图像,可显示每张图片的信息,还可以进行单图逐个预览,并进行多图批量拼接,最后将图片保存到本地 ...
- Word中的表格插入图像,不能平铺表格内
首先图像设置为[嵌入型] 1.点击图像,选择[布局] 2.点击[单元格边距] 3.将所有边距设置为[0] 4.取消[自动重调尺寸以适应内容]的勾选 5.[确定] 6.再调调图像尺寸 成功!
最新文章
- pandas将dataframe中的特定数据列的内容转化为列表list数据(convert dataframe column values into a list)
- nginx 配置信息
- 《Java和Android开发实战详解》——2.5节良好的Java程序代码编写风格
- 基于Tablestore的Wifi设备监管系统架构实现
- 如何建立个人博客网站
- 微软推出 Microsoft Build of OpenJDK 预览版!
- tmp文件夹的默认权限
- 25. (附加)二叉树的所有路径(C++版本)
- 阿里巴巴大数据技术专家岗面试题
- 抖音很火的计算机音乐,抖音最近很火的几首背景音乐(BGM),推荐给大家很好听...
- iPhone设备上安装beta版本系统,在浏览器中搜索网址 beta.apple.com
- java报错establishing_[Microsoft][SQLServer 2000 Driver for JDBC]Error establishing socket错误解决方法总结...
- phyton做年历和月历
- 关于oracle预言机
- php array assoc,PHP array_diff_assoc() 函数用法及示例
- 2002年的图灵奖获得者-Ronald L. Rivest
- android Git版本控制
- CentOS6 使用 RPM 安装 apache 服务器(一)
- 如何使用mp4v2解析mp4文件,抽取音视频数据帧【源码】【mp4】【NVR】
- javax.net.ssl.SSLHandshakeException: Unacceptable certificate: CN=GeoTrust SSL C