CSS中对图片(background)的一些设置心得总结
来源:互联网 发布:全国vb二级考试题库 编辑:程序博客网 时间:2024/05/18 00:02
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接拖到html里,这就需要对图片的css样式进行一些调整,鉴于我总是记不住一些样式属性而无法让图片按我的想法摆放,不得已每次都要百度一下,几次下来,让我很是恼火,于是专门整理了一些css中关于图片的一些属性设置,置于此,以供下次望及时查看(废话真多):
css2中关于background的属性有:
background-color: 指定填充背景的颜色,不引图片只需要一个纯色背景时用,这种情况下也可直接时用
<span style="white-space:pre"></span>background:#eee;
background-image: 引用图片作为背景,如
<span style="white-space:pre"></span>backgroud-image:url("img/bg.jpg");
background-position: 指定元素背景图片的位置,这个很多人都不习惯用,但还是蛮有用处的,实际中图片的左上角正对应元素的左上角,当你的打算使用像素来定位的时候,可以使用:
<span style="white-space:pre"></span>background-position: 0 0;//第一个数字代表x轴水平位置,第二个数字代表y轴垂直位置<span style="white-space:pre"></span>background-position: 0 100px;
<span style="font-family: 'Microsoft YaHei'; font-size: 14px; background-color: rgb(255, 255, 255);">当你的元素尺寸不适用像素设置的时候,还可以使用其他数值,如</span>
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="white-space:pre"></span>background-position: top right; // 图片的top对应元素的top 图片的right对应元素的right<span style="white-space:pre"></span>background-position: 100% 50%; //使用元素的百分比数值设置图片位置,道理同上</span></span>
background-repeat: 决定是否重复背景图片,取值有以下几种:
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="white-space:pre"></span>background-repeat: repeat; //图片可重复<span style="white-space:pre"></span>background-repeat: no-repeat ; //图片不可重复<span style="white-space:pre"></span>background-repeat: repeat-x; //图片在x轴上可以重复<span style="white-space:pre"></span>background-repeat: repeat-y; //图片在y轴上可以重复<span style="white-space:pre"></span>background-repeat: inherit; //遵从父元素的设置</span></span>
background-attachment: 决定背景图是否随页面滚动,取值有:
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="white-space:pre"></span>background-attachment: scroll; //默认值;表示背景紧贴元素<span style="white-space:pre"></span>background-attachment: fixed; //背景不随元素滚动,当页面向下时,背景待在最初相对于浏览器的位置<span style="white-space:pre"></span>background-attachment: inherit;//遵循父元素的设置</span></span>
当希望设置background的多个属性时,可以分别设置每一个,也可以合并为一行,写在一个属性里:
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="white-space:pre"></span>background: transparent url(image.jpg) 50% 0 scroll repeat-y;</span></span>
css3中对于background添加了很多属性:
background-color,设置图片的大小尺寸,取值有好几个:
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="white-space:pre"></span> background-size: contain; //缩小图片以适应元素的尺寸(图片宽高比不变)<span style="white-space:pre"></span> background-size: cover; //扩展图片以填满元素(图片宽高比不变)<span style="white-space:pre"></span> background-size: 50% 100%; //自定义调整图片大小</span></span>background-clip,背景修剪,可以很好的控制背景的显示位置:取值有:
<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="white-space:pre"></span>background-clip: border-box; //背景显示在边框内<span style="white-space:pre"></span>background-clip: padding-box; //背景显示在padding内(不是边框内)<span style="white-space:pre"></span> background-clip: content-box; //只在内容内显示背景(不在padding中,也不在边框中)</span>还有两个属性为,background-break和background-origin,我对这两个属性并没有使用过,看了看网上的讲解觉得没啥大用处,这里就不写下来误人子弟了。
css中关于背景的知识点还是很博大精深的,以后有新的理解,再往这儿添。
注:文章参考》》》》http://blog.csdn.net/adenfeng/article/details/8199362 0 0
- CSS中对图片(background)的一些设置心得总结
- 对CSS中各个选择器的一些总结
- CSS中background:url(图片) 不能显示的问题
- Bottle中对内联CSS中的background-image属性图片相对路径url()加载失败的折中方案
- css中background url不显示图片
- CSS中background-image:url()属性设置
- 对CSS基础知识学习的一些总结
- css background之设置图片为背景技巧
- css background之设置图片为背景技巧
- css background 属性设置鼠标滑过图片跳动效果
- css background之设置图片为背景技巧
- 04background的css样式总结
- CSS背景设置background
- wordpress设置自定义固定链接的一些心得总结
- css学习的一些心得
- css学习的一些心得
- css学习的一些心得
- CSS中对各浏览器兼容的心得整理
- Android开发方法数超过65535的解决办法
- hdoj 2097 Sky数
- 第一周-入门训练-序列求和
- Debug Assertion Failed! Expression: _pFirstBlock == pHead
- 对象新建属性对原型链的影响
- CSS中对图片(background)的一些设置心得总结
- leetcode84: Largest Rectangle in Histogram
- JavaMail实现QQ邮箱发送报错问题的处理
- ngrok映射端口到外网
- 今天算是开博的第一天,希望能记录我菜鸟的成长之路吧
- LINUX几个常用到的命令
- leetcode 20 Valid Parentheses
- SQL与NoSQL,谁更适合大数据?主流的关系型数据库?什么是JSON?
- 5.Foundaton Kit介绍 部分一