博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS中对图片(background)的一些设置心得总结
阅读量:5161 次
发布时间:2019-06-13

本文共 2016 字,大约阅读时间需要 6 分钟。

写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接拖到html里,这就需要对图片的css样式进行一些调整,鉴于我总是记不住一些样式属性而无法让图片按我的想法摆放,不得已每次都要百度一下,几次下来,让我很是恼火,于是专门整理了一些css中关于图片的一些属性设置,置于此,以供下次望及时查看(废话真多):

  css2中关于background的属性有:

  •   font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px;"> 

     

          background:#eee;
    •  background-image: 引用图片作为背景,如 
        backgroud-image:url("img/bg.jpg");
    •  background-position: 指定元素背景图片的位置,这个很多人都不习惯用,但还是蛮有用处的,实际中图片的左上角正对应元素的左上角,当你的打算使用像素来定位的时候,可以使用:
      background-position: 0 0;//第一个数字代表x轴水平位置,第二个数字代表y轴垂直位置background-position: 0 100px;
      当你的元素尺寸不适用像素设置的时候,还可以使用其他数值,如
       background-position: top right; // 图片的top对应元素的top 图片的right对应元素的right   background-position:  100% 50%; //使用元素的百分比数值设置图片位置,道理同上
    •  background-repeat: 决定是否重复背景图片,取值有以下几种:
      background-repeat: repeat;       //图片可重复 background-repeat: no-repeat ; //图片不可重复 background-repeat: repeat-x;    //图片在x轴上可以重复 background-repeat: repeat-y;    //图片在y轴上可以重复 background-repeat: inherit;       //遵从父元素的设置
    • background-attachment: 决定背景图是否随页面滚动,取值有:
      background-attachment: scroll; //默认值;表示背景紧贴元素background-attachment: fixed;  //背景不随元素滚动,当页面向下时,背景待在最初相对于浏览器的位置background-attachment: inherit;//遵循父元素的设定

      当希望设置background的多个属性时,可以分别设置每一个,也可以合并为一行,写在一个属性里:

      background: transparent url(image.jpg) 50% 0 scroll repeat-y;

             css3中对于background添加了很多属性:

    • background-color,设置图片的大小尺寸,取值有好几个:
      background-size: contain;     //缩小图片以适应元素的尺寸(图片宽高比不变)  background-size: cover;       //扩展图片以填满元素(图片宽高比不变)  background-size: 50% 100%;    //自定义调整图片大小

       

    • background-clip,背景修剪,可以很好的控制背景的显示位置:取值有:
      background-clip: border-box;   //背景显示在边框内 background-clip: padding-box;  //背景显示在padding内(不是边框内) background-clip: content-box;  //只在内容内显示背景(不在padding中,也不在边框中)

      还有两个属性为,background-break和background-origin,我对这两个属性并没有使用过,看了看网上的讲解觉得没啥大用处,这里就不写下来误人子弟了。

    css中关于背景的知识点还是很博大精深的,以后有新的理解,再往这儿添。

    注:文章参考》》》》http://blog.csdn.net/adenfeng/article/details/8199362

                                             https://www.cnblogs.com/fingerboy/p/5146229.html

转载于:https://www.cnblogs.com/muzixiaozha/p/10342158.html

你可能感兴趣的文章
字符串的查找删除
查看>>
NOI2018垫底记
查看>>
快速切题 poj 1002 487-3279 按规则处理 模拟 难度:0
查看>>
Codeforces Round #277 (Div. 2)
查看>>
【更新】智能手机批量添加联系人
查看>>
NYOJ-128前缀式计算
查看>>
深入理解 JavaScript 事件循环(一)— event loop
查看>>
Hive(7)-基本查询语句
查看>>
注意java的对象引用
查看>>
C++ 面向对象 类成员函数this指针
查看>>
NSPredicate的使用,超级强大
查看>>
自动分割mp3等音频视频文件的脚本
查看>>
判断字符串是否为空的注意事项
查看>>
布兰诗歌
查看>>
js编码
查看>>
Pycharm Error loading package list:Status: 403错误解决方法
查看>>
steps/train_sat.sh
查看>>
转:Linux设备树(Device Tree)机制
查看>>
iOS 组件化
查看>>
(转)Tomcat 8 安装和配置、优化
查看>>