Body with background image and gradient

html {
background: linear-gradient(#000, white) no-repeat;
height: 100vh;
}

Body with elaborate background using only CSS

background-image: url("img_tree.gif"), url("paper.gif");

Using CSS background images for conditional image display

    div.koala {
background-image: url(koala.jpg);
}
div.photo {
background-size: cover;
float: left;
margin: 0 2vw 1vw 0;
height: 50vw;
position: relative;
top: 3px;
transition: all 0.5s;
width: 50vw; }
@media screen and (max-width: 500px) {
div.photo {
background-image: none;
height:;
margin:;
width:;
}
}

Using CSS background images for alternative images

body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
margin:;
}
div {
background-image: url(koala.jpg);
background-size: cover;
height: 50vw;
transition: background-image 2s;
width: 50vw;
}
@media screen and (max-width: 500px) {
div {
background-image: url(koala_crop.jpg);
}
}

[CSS3] CSS Background Images的更多相关文章

  1. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  2. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  3. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  4. CSS background 属性 总结

    CSS background 属性总结

  5. HTML CSS——background的认识(一)

    今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...

  6. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  7. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  8. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  9. 巧用CSS3之background渐变

    常见斑马loading 上图是我们常见的loading进度条,以前都是用一张背景图片平铺的.其实如果抛去兼容性因素,我们可以用零图片纯样式来实现. 一,首先,我们先为容器定义一个纯蓝色背景: box{ ...

随机推荐

  1. NEFU 109

    n最大为2000000000(不知为什么OJ上是1000),若为判断2000000000是素数,则必有一个素数在sqrt(n)内,求出这个范围 的所有素数,其比最大数据小的n'的sqrt(n')也在这 ...

  2. poi判断一行是隐藏的getZeroHeight()

    poi判断一行是隐藏的 getZeroHeight() boolean isZeroHeight = row.getZeroHeight(); if(isZeroHeight){ // 如果为隐藏行就 ...

  3. Yarn架构基本概况(二)

    在概况(一)中,主要简单的对Yarn的情况作了简单的介绍,今天花一定时间在某些详细的模块上呈现下面Yarn的总体情况.帮助大家更好的理解Yarn. 1)ResourceManager 在Yarn的总体 ...

  4. Jasperreport+ireport 实践操作及web应用

    Jasperreport+ireport 实践操作及web应用   学习完jasperreports+ireport,给我感觉深刻,不仅掌握了报表开发技术,还掌握了怎样在web中生成pdf,xls,r ...

  5. C# Keywords - is

    记录一下在日常开发过程中遇到的一些C# 基础编程的知识!希望以后能用的着.知识是在平常的开发过程中去学到的.只有用到了,你才能深入的理解它,并用好它. 本资料来源于:MSND下面是一些相关的code ...

  6. 编译安装FFmpeg 要支持xvid、x264、mp3、ogg、amr、faac

    编译安装FFmpeg 要支持xvid.x264.mp3.ogg.amr.faac libfaac    faac格式的编解码包libmp3lame    mp3格式编解码包libopencore-am ...

  7. art-template模板渲染及其过滤器

    原生语法 使用原生语法,需要导入template-native.js文件.在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失. <script id="tpl&qu ...

  8. 立即执行函数与Function

    js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 与new Function()区别? new Function() 还是有区别的,fn = ne ...

  9. javascript: 基于原型的面向对象编程

    Douglas Crockford指出javascript是世界上最被误解的编程语言.由于javascript缺少常见的面向对象概念,许多程序猿认为javascript不是一个合适的语言.我在做第一个 ...

  10. 搭建自己的koa+mysql后台模板

    1.在vscode里面打开一个文件夹 2.cnpm init 3.导入必要的依赖项 "dependencies": { "koa": "^2.7.0& ...