css 设置背景颜色和图片的一些技巧
时间:2015-12-28
css中,我们可以使用background来设置HTML元素的背景图片和背景颜色,设置背景颜色是非常简单的一件事情,但设置背景图片则需要一些技巧,本文章向大家介绍background的使用方法和技巧,需要的码农可以参考一下。
设置背景颜色:
要设置背景颜色,直接使用“background:颜色值;”即可。如:
body{background:#000}
将body的背景颜色设置为黑色。
设置背景图片:
1.规律背景图片。
不如我们要设置一个渐变的背景图片,这种背景只需要切出1像素宽,高度合适的图片作为背景即可。
body{background: url("../images/body_bg.jpg") repeat-x rgb(222, 235, 243);}
实例:
<!DOCTYPE html>
<html>
<head>
<title>css 设置背景颜色和图片的一些技巧</title>
<style>
body{background: url("../Public/images/body_bg.jpg") repeat-x rgb(222, 235, 243);}
</style>
</head>
<body>
</body>
</html>
2.不规律的图片
常常看到一些专题或形象网页,背景是一种非常大图片作为背景,而通常情况下宽屏和窄屏显示器都能显示铺满的全屏背景图片,就像图片能自适应宽度大小一样的。其实这种实现一样非常简单,将这张图片宽度美工设计足够大,比如市场上最宽显示屏分辨率宽度为2560像素,那么要让这样的宽屏显示器浏览此网页也能铺满全屏,那么你的这张背景图片就必须做成宽度大于或等于2560px宽度的,这样以来宽屏、窄屏显示器打开此网页都能铺满全屏,最小化、最大化、改变浏览器窗口打开背景图片都是全屏的居中的看上去就像背景图片自适应大小一样。
关键:全屏自适应背景图片关键是图片做足够宽,以最宽分辨率显示屏能都铺满,小分辨率自然就更是铺满。同时需要设置这样背景图片作为body背景后需要居中。
body{background: url(bg.jpg) no-repeat center 0}
代码解释:设置这个图片为网页背景,通常不平铺(no-repeat),水平居中,靠上显示
- ORM查询语言(OQL)简介--概念篇
- Discuz! 任意文件删除漏洞重现及分析
- .NET DLR 上的IronScheme 语言互操作&&IronScheme控制台输入中文的问题
- Java中Map相关的6大问题——每个开发人员都要注意
- android service 学习(下)
- 混淆漏洞CVE-2017-0213技术分析
- android service 学习(上)
- 黑帽SEO剖析之隐身篇
- Java中如何判断一个字符串是Java代码还是英文呢?
- 将复杂查询写到SQL配置文件--SOD框架的SQL-MAP技术简介
- Java中实现找到两个数组交集的2种方法,开发实用
- Java Web中JSP的include 指令知识点总结——每日一语法学习
- Java反序列化漏洞从理解到实践
- ORM查询语言(OQL)简介--高级篇(续):庐山真貌
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 详细整理Spring事务失效的具体场景及解决方案
- Vue监听文本框实时输入限制输入长度
- 30 分钟轻松搞定正则表达式基础
- Vant引入CDN实现图片懒加载
- Js时间戳倒计时天时分秒
- 微信小程序引用we-cropper裁切图片
- NodeJs获取get/post传值
- Mybatis源码本地化构建Demo
- NodeJs封装静态web服务器、路由、读取文件获取响应类型
- NodeJs使用ejs模板引擎实现后端渲染
- 如何优雅地本地化构建Mybatis源码
- Vue监听返回键关闭弹出层不返回页面
- Css添加div点击态
- Mybatis源码笔记之浅析ParameterHandler
- SpringBoot总结之浅析自动化配置原理