给网页添加图片:

1、background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上

2、background-size不支持IE8

background-size: width height;

background-size: contain;/*迫使图片进行尺寸调整,保持图片的长宽比*/

background-size: cover;/*宽高调整,适应元素,所以经常变形*/

background-size: 100% auto;

3、background-color: yellow;background: url(img.aaaaa.png) no-repeat;与

background: url(img.aaaaa.png) no-repeat; background-color: yellow;是有区别的,在第一中方法中,先设置背景色为黄色,但再执行background的时候,会自动设置默认值为透明,所以背景图片颜色会覆盖黄色

4、在使用背景图片的时候尽量使用css属性background,因为很多其他背景图片的css属性IE8都不支持

5、线性渐变:

background-image: linear-gradient(left,#900 20%,#fc0 30%,#fc0 70%,#900 80%);

/*对于第一种颜色以及最后一种颜色,它是不需要定位,但如果有一个值则表示一种持续状态其余的是告诉浏览器子什么位置上的时候需要进行改变颜色*/

谷歌并不支持这属性,需要加前缀-webkit-

IE9及其之前的版本也都不支持渐变,需要先设置一个背景色

线性重复渐变:background-image: -webkit-repeating-linear-gradient(45deg,#900 0,#900 10px,#fc0 10px,#fc0 20px)

6、径向渐变: (椭圆或者圆形方式渐变)

background-image: -webkit-radias-gradient(20% 40%,circle,red,blue);

/*渐变方向从元素左边20%以及元素上方40%处开始*/

(20% 40%,circle closest-side,red,blue)

/*closest-side从中心点开始一直延续到离中心点最近的那一边,半径也就是中心点到这条边的长度,椭圆则两条边上下以及左右*/

/*closest-corner到最近元素角的距离*/

/*farther-side到最远一边的距离*/

/*farther-Corner到最远角的距离*/

7、如果图片并排排列的时候,如果图片的高度是参差不齐的,则需要使用表格

CSS3-给网页添加图片的更多相关文章

  1. css008 给网页添加图片

    css008 给网页添加图片 1.            css和<img>标签       1.<img>标签是html的添加图片的标签,一般为: <img src=” ...

  2. JS为网页添加文字水印【原创】

    最近需要实现为网页添加水印的功能,由于水印的信息是动态生成的,而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印,而为网页添加文字水印相关资料较少,于是就自己动手写了这个代码. 通常加动态水 ...

  3. delphi WebBrowser控件上网页验证码图片识别教程(一)

    步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...

  4. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  5. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  6. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  7. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  8. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  9. 使用Jsoup解决网页中图片链接问题

    在做Facebook和WhatsApp分享的时候,分享出去的谷歌短链,Facebook获取不到大图,和竞品展示的不一样,WhatsApp分享出去的短链没有图片和描述. WhatsApp: 分析竞品UC ...

随机推荐

  1. php数据访问(查询)

    查询:常用关键字查询 和 准确查询 单条件查询 创建添加查询元素 <br /> <form action="main.php" method="post ...

  2. yii 自定义组件的调用

    1,main.php 里面导入 'import' => array(            'application.components.*'        ), 2,application/ ...

  3. struts.xml配置详解

    struts.xml是我们在开发中利用率最高的文件,也是Struts2中最重要的配置文件. 一下分别介绍一下几个struts.xml中常用到的标签 1.<include> 利用includ ...

  4. 3ds max画曲线 设置摄像机的起始位置

    参考 http://www.3dmax8.com/3dmax/2013/0916/5661.html 如果想创建曲线段,可以在单击下一个点时按住鼠标不放,继续拖曳,再拖到另一个点上,单击鼠标右键,即可 ...

  5. Android利用Gson解析嵌套多层的Json

    参考:http://www.cnblogs.com/jxgxy/p/3677256.html 比如我们要解析一个下面这种的Json: String json = {"a":&quo ...

  6. js DOM对象

    查找元素 根据id找 document.getElementById("b"): 根据class找 document.getElementsByClassName("aa ...

  7. windows  远程桌面命令 mstsc

    win+R------>mstsc: 弹出: 目标机必开远程

  8. Feature hashing相关 - 2

    Bloom filter     思路 用多个不同hash 来记录,比如遇到一个 love 有4个hash function 映射到4个bit位置,如果所有位置都是1 那么认为之前已经遇到love这个 ...

  9. .net学习之泛型、程序集和反射

    一.泛型1.CLR编译时,编译器只为MyList<T>类型产生“泛型版”的IL代码——并不进行泛型的实例化,T在中间只充当占位符.例如:MyList 类型元数据中显示的<T> ...

  10. WPF PRISM开发入门一( 初始化PRISM WPF程序)

    这篇博客将介绍在WPF项目中引入PRISM框架进行开发的一些基础知识.目前最新的PRISM的版本是Prism 6.1.0,可以在Github上获取PRISM的源码.这个系列的博客将选择PRISM 4. ...