给网页添加图片:

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. 【leetcode】Subsets (Medium) ☆

    Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...

  2. poj 3735 Training little cats 矩阵快速幂+稀疏矩阵乘法优化

    题目链接 题意:有n个猫,开始的时候每个猫都没有坚果,进行k次操作,g x表示给第x个猫一个坚果,e x表示第x个猫吃掉所有坚果,s x y表示第x个猫和第y个猫交换所有坚果,将k次操作重复进行m轮, ...

  3. Ajax与Jquery题库

    一.    填空题 1.在JQuery中被誉为工厂函数的是 $() . 2.在jQuery中需要选取<div>元素里所有<a>元素的选择器是 $("div a&quo ...

  4. 统计 F-test 和 T-test

    1 显著性差异 如果样本足够大,很容易有显著性差异.样本小,要有显著性差异很难. y是因变量,x是自变量 2 F-test与T-test Ftest也称ANOVA,是用来检测一个y下的不同level的 ...

  5. 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片

    html代码: <input id="file_upload" type="file" /> <div class="image_c ...

  6. Mysql之mysqlbinlog使用

    mysqlbinlog用于BinLog的显示,备份和重做. 默认情况下,mysqlbinlog是以base-64编码的方式呈现的.如: mysqlbinlog  master_bin.000006   ...

  7. finla变量,方法和类

    1.finla变量关键字可用于变量声明,一旦该变量被设定,就不可以再改变该变量的值,通常,有final定义的变量为常量 final关键字定义的变量必须在声明时对其进行赋值定义,final除了可以修饰基 ...

  8. 浏览器方法及代码打包成APP的

    <script src=" http://static.ydbimg.com/API/YdbOnline.js" type="text/javascript&quo ...

  9. Jquery.Datatables 服务器处理(Server-side processing)

    看了看介绍 http://datatables.club/manual/server-side.html 没有经过处理的分页,先显示出来看看效果,就这样写(存储过程自己写) cshtml " ...

  10. JVM内存区域与内存溢出异常

    Java虚拟机在执行java程序时会把它所管理的内存会分为若干个不同的数据区域,不同的区域在内存不足时会抛出不同的异常. >>运行时数据区域的划分 (1)程序计数器程序计数器(Progra ...