CSS 背景图片设置：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

    <style>

        .container{

            background-image:url(img/view_002.jpg);　

            width:100%;

            height:300px;

            line-height: 300px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="container"></div>

</body>

</html>

上述代码为一个类名为 container 的 DIV 插入了一张背景图片，效果如下：

原图：

网页效果图：

为背景图片设置样式，使之更美观：

            /* 图片自适应大小 */

            /*background-size: 100% 100%;*/ 

            /* 图片居中 */

            background-position: center;

            /* 背景填充  */

            background-size: cover;

            /*背景模糊*/

            -webkit-filter: blur(2px);

        }

CSS 常用 background 设置的更多相关文章

  1. css常用样式背景background如何使用

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

  2. [Web 前端] 010 css 常用的边框设置

    css 常用边框属性 概览 参数 释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式solid 实线,dotted 点状线,dash ...

  3. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  4. CSS背景background详解，background-position详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  5. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  6. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  7. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  8. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  9. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

随机推荐

  1. python3 格式化输出给定时间的下一秒

    # 功能:输入一个时间,格式化输出该时间的下一秒 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan # 功能:输入一个 ...

  2. 怎样判断一个P2P平台是否靠谱?

    判断一个网站,是否靠谱,是有规律可循的,P2P平台算是个新兴的电商类网站.   网上欺诈类的网站,不限于P2P,实在是太多了,真的有必要总结下最关键的几个靠谱指标.   最关键的2个   1.创始人和 ...

  3. 老李的菜园 mysql 自定义函数

    新建: Create function function_name(参数列表)returns返回值类型 函数体 函数名,应该合法的标识符,并且不应该与已有的关键字冲突. 一个函数应该属于某个数据库,可 ...

  4. thinkphp事务机制

    thinkphp事务机制 一.总结 下面文章也要看,下面有抛出异常(自己提供错误信息那种) 1.事务机制(原子性):所有的事情都完成了就提交,否则回滚.电商里面用的多,付钱买东西的时候. 2.样例(简 ...

  5. ORACLE中的Net Configuration Assistant 点击后无反应, sqlplus登录数据库提示Oracle11g ORA-12560: TNS: 协议适配器错误

    首先是对于点击无反应问题: 如果是客户端下的Net Configuration Assistant可用,而服务器端的Net Configuration Assistant等工具不可用的原因如下. 环境 ...

  6. ios sqlite数据库操作

    @interface MyViewController () { // 数据库实例,代表着整个数据库 sqlite3 *_db; } @end @implementation MyViewContro ...

  7. [spark]spark 编程教程

      参考: 英文:https://spark.apache.org/docs/latest/programming-guide.html 中文:http://www.cnblogs.com/lujin ...

  8. linux 查看 *.a *.so 符号表(zt)

    objdump -tT libName.so | grep symbel symbolName nm -D libName.so | grep symbel symbolName 很多非常熟悉wind ...

  9. 谈谈我对P2P网络借贷的一些看法

    北漂期间,只知道互联网金融非常火,相关创业公司和项目也非常多.2013年,最火的是余额宝等宝宝类产品.当时的收益率达到了7%,流动性如此高的情况下,竟达到这么高的收益率,我简直不敢相信.另外,当时考虑 ...

  10. （一）RabbitMQ消息队列-RabbitMQ的优劣势及产生背景

    原文:(一)RabbitMQ消息队列-RabbitMQ的优劣势及产生背景 本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是 ...