htmlCSS-----背景样式
目录
前言:
背景样式
1.背景颜色 background-color
2.背景图片 background-image
背景的权重比较
代码示例:
前言:
很久没写文章了,会不会想我呢!今天我们开始学习html和CSS的背景样式以及文字样式,学会了这两个样式你就可以更好的装饰你的网页了,下面我们一起来看看吧。
背景样式
其实我们前面都见到过很多次使用了background的相关属性,其实background属性用于设置盒子的背景颜色或者背景图片。background是一个复合属性。backgorund: color image repeat position/size attachment 。
1.背景颜色 background-color
背景颜色是很常见的一种样式,比如 background-color: red;下面就看个示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.violet{background-color: blueviolet;display: inline-block;height: 150px;}</style>
</head>
<body><div class="violet">this a demo</div>
</body>
</html>
效果:
2.背景图片 background-image
在此之前我们学习过了img 标签,这个标签是用来放置图片的,但是这个图片不能作为一个背景图片,只能说是作为一个标签的内容,所以img标签中的图片不能作为一个背景,只能算是一个页面加载的图片。
图片的放置
背景图片是很常见的,写法如下:div{ background-image: url("路径"); }
图片的平铺方式
/* case 1 : 背景图片平铺 默认*/
div{ background-repeat: repeat; }/* case 2 : 背景图片不平铺 */
div{ background-repeat: no-repeat; }/* case 3 : 背景图片水平平铺 */
div{ background-repeat: repeat-x; }/* case 4 : 背景图片垂直平铺 */
div{ background-repeat: repeat-y; }
图片的位置
设置背景图片位置;
background-position:X Y; X和Y默认是:0 0
X允许的取值方式 | Y允许的取值方式 |
---|---|
left左对齐 center水平居中 right右对齐 | top顶部对齐 center垂直居中 bottom底部对齐 |
百分比 | 百分比 |
px | px |
如果只给一个值,那么第二个值默认center(50%);
X轴的值和Y轴的值如果给的是方位(单词)值,可以交换顺序。
背景的权重比较
内容>边框>图片背景>背景颜色
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.violet{border: 2px solid red;height: 500px;background-color: blueviolet;font-size: 75px;font-family: 华文行楷;/* 文字的位置放到中间对齐 */text-align: center;color: pink;background-image: url(../image/OIP-C\ \(1\).jpg);/* 背景图片设置为不重复覆盖 */background-repeat: no-repeat;/* 背景图片位置放到中间 */background-position: center;}.violet .word{font-size: 25px;font-family: Georgia, 'Times New Roman', Times, serif;color: chartreuse;margin-top: 150px;margin-left: -300px;}.violet .image{margin-left: -400px;margin-top: 50px;}</style>
</head>
<body><div class="violet"><div>波奇酱</div><!-- 内容区域 --><div class="word">我是小波奇</div><!-- 这个是显示的图片内容 --><div class="image"><img src="../image/20230714234449.gif" alt="error" width="70px"></div></div>
</body>
</html>
效果:
以上就是今天的全部内容了,我们下一期再见!
分享一张壁纸(波奇酱):
htmlCSS-----背景样式相关推荐
- css 背景样式学习
背景样式主要有5个属性: 1. background-color 背景颜色 2.background-img 背景图像 3.background-repeat 背景图像如何重复(no-repeat ...
- html5 背景拼贴,AI创建漂亮的无缝拼贴图案背景样式
本教程是向大家介绍利用AI创建漂亮的无缝拼贴图案背景样式,教程制作出来的图案样式非常漂亮,教程难度不是很大,推荐给脚本之家的朋友,喜欢的朋友可以跟着一起来学习制作! 优设分享过一组很火的顶级纹理,都是 ...
- ActivityGroup 实现分页和自定义标签(内有GridView的点击背景样式的改变方法)
我这里实现的是方法和这个帖子的主要差别的就是界面都是自定义的.这样可以实现很多美观的分页,新浪微博等的效果一样可以达到.上效果图如下: 可以看到下方的就是标签界面了,这是一个GridVIew.很多人都 ...
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转载连接:http://www.cnblogs.com/huangcong/p/3687665.html phpexcel中文教程-设置表格字体颜色背景样式.数据格式.对齐方式.添加图片.批注.文字块 ...
- css3-3 css3背景样式
css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
- 去掉chorme浏览器自动补全时input框的背景样式
去掉chorme浏览器自动补全时input框的背景样式 通过延迟背景出来的时间来解决该问题 input:-webkit-autofill {-webkit-transition-delay: 9999 ...
- CSS浮动定位与背景样式
CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念 本质功能 : 实现块元素并排布局 使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...
- 店铺首页图片css,店铺装修-CSS中的背景样式
本篇教程学习的是店铺装修-CSS中的背景样式,喜欢的一起来学习吧. 那我们开始今天的教程吧. 1.在[窗口]-[CSS设计器]添加[在页面中定义],添加一个新的类,[布局]里面有两个重要的东西,一个是 ...
- HTML背景样式简单介绍
HTML背景样式 下面简单介绍几个html的背景样式,介绍的并不全面,望不要介意. 1. Background-color:表示背景颜色 示例:<body style="backgro ...
- 【CSS】背景样式(颜色、图片、平铺、附着和位置)
大家好,我是翼同学! 目录 1️⃣前言 2️⃣背景样式 ✨背景颜色
最新文章
- centos的ssh配置
- 2016.5.27 科学————量子力学初识
- HttpApplication IHttpAsyncHandler, IHttpHandler, IComponent, IDisposable ps url System.Web.dll
- contos7设置固定ip和dns_CentOS7 修改设置静态IP和DNS
- Ruby/Rails 生态环境、社区、资料 Ecosystem
- VTK:可视化算法之TensorEllipsoids
- asp.net常用函数 选择自 UAM_Richard 的 Blog
- 【ORACLE 高可用】 ORACLE STREAM 基于单表的流复制 配置 案例
- 2021牛客暑期多校训练营2 L-WeChat Walk(分块)
- php把1拆分成三份,【php】位运算如何拆分
- 最长递增子序列_python_算法与数据结构
- dnf机械机器人补丁_干货 | 详解工业机器人控制系统架构
- Kubernetes学习总结(9)—— 基础架构的未来是 K8s,那么 K8s 的未来在何方?
- 使用NewtonSoft.JSON.dll来序列化和发序列化对象
- 为啥mysql的load这么快_【MySQL】浅谈MySQL的LOAD DATA
- 【VHDL】分频器设计要求:25分频,占空比为50%
- HTML实例--制作表单
- 家庭收支记账软件Java
- Java语言实现会议安排问题,利用贪心法思想解决问题
- springCloud 授权服务器
热门文章
- Autosar Dcm模块介绍
- 身份证号码格式说明(仅供学习使用)
- 693. 交替位二进制数 / 227. 基本计算器 II / 264. 丑数 II
- 计算机专业公共基础课,非计算机专业计算机公共基础课程中计算思维体现的必要性...
- php超链接鼠标滑动加下划线,打造与众不同的鼠标滑过超链接下划线动画效果
- 猝不及防,Google成功“造人”令人胆寒!人类迎来史上最惨失业潮…
- Mobile - 电池充满后应该拔插头?这些误区你知道吗?
- Linux-磁盘空间转移
- 小米盒子连接老式电脑显示器(VGA接口)
- 电子书库小峰_不许联想 王小峰「pdf-epub-mobi-txt-azw3」