0

0

CSS中对图片(background)的一些设置心得总结_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:28:51

|

1250人浏览过

|

来源于php中文网

原创

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

  css2中关于background的属性有:

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

    TTSMaker
    TTSMaker

    TTSMaker是一个免费的文本转语音工具,提供语音生成服务,支持多种语言。

    下载

          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

     

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    php源码安装教程大全
    php源码安装教程大全

    本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

    7

    2025.12.31

    php网站源码教程大全
    php网站源码教程大全

    本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

    4

    2025.12.31

    视频文件格式
    视频文件格式

    本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

    7

    2025.12.31

    不受国内限制的浏览器大全
    不受国内限制的浏览器大全

    想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

    7

    2025.12.31

    出现404解决方法大全
    出现404解决方法大全

    本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

    42

    2025.12.31

    html5怎么播放视频
    html5怎么播放视频

    想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

    4

    2025.12.31

    关闭win10系统自动更新教程大全
    关闭win10系统自动更新教程大全

    本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

    3

    2025.12.31

    阻止电脑自动安装软件教程
    阻止电脑自动安装软件教程

    本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

    3

    2025.12.31

    html5怎么使用
    html5怎么使用

    想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

    2

    2025.12.31

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号