CSS中对图片(background)的一些设置心得总结

简介:   写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接拖到html里,这就需要对图片的css样式进行一些调整,鉴于我总是记不住一些样式属性而无法让图片...

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

  css2中关于background的属性有:

  •  background-color: 指定填充背景的颜色,不引图片只需要一个纯色背景时用,这种情况下也可直接时用

 

      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

 

相关文章
|
15天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
1月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
3天前
|
前端开发 JavaScript UED
|
20天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
46 1
|
29天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
40 2
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
26 5
|
3月前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)