给网页添加图片:

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. 【编程题目】和为 n 连续正数序列

    51.和为 n 连续正数序列(数组).题目:输入一个正数 n,输出所有和为 n 连续正数序列.例如输入 15,由于 1+2+3+4+5=4+5+6=7+8=15,所以输出 3 个连续序列 1-5. 4 ...

  2. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  3. Ajax与Jquery题库

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

  4. 怎么查询电脑ip地址

    方法一:本地连接查看法 方法二:命令行法 摘自:http://jingyan.baidu.com/article/870c6fc3d509a1b03fe4be06.html

  5. vector 去重复

    ①首先将vector排序 sort( vecSrc.begin(), vecSrc.end() ); // 1,2,3,3,4,4,6,7,8,9 ②然后使用unique算法,unique返回值是重复 ...

  6. Android Programming: Pushing the Limits -- Chapter 5: Android User Interface Operations

    多屏幕 自定义View 多屏幕 @.Android 4.2 开始支持多屏幕. @.举例: public class SecondDisplayDemo extends Activity { priva ...

  7. 自动复制转换StringBuffer

    自动复制转换StringBuffer http://www.cnblogs.com/coqn/archive/2012/07/31/all_StringBuufer.html http://blog. ...

  8. Linux下Vi/Vim使用笔记

    启动和关闭vim vi 打开 Vi/Vim 打开 Vi/Vim 并加载文件 <file> vi <file> vim编辑器的三种模式:一般模式.编辑模式和命令行模式在一般模式中 ...

  9. djcelery的细节篇

    http://blog.csdn.net/samed/article/details/50598371 随时撸一撸,要点记心间.. 1. 下面讲解一下celery.py文件的配置内容,为何要这么配置. ...

  10. .NET NLog 详解(四) - filter

    我们将版本向前切换到20051025,这期的关注点是filter.我们在使用日志的时候可能希望加上一些过滤器,在满足某些特定条件的时候才输出.举个简单的使用方式如下: <nlog> < ...