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. jmeter与apache测试网站并发

    本文主要介绍性能测试中的常用工具jmeter的使用方式,以方便开发人员在自测过程中就能自己动手对系统进行自动压测和模拟用户操作访问请求.最后还用linux下的压测工具ab做了简单对比. 1.      ...

  2. IOS总结

    1.Difference between shallow copy and deep copy?
浅复制和深复制的区别?
答案:浅层复制:只复制指向对象的指针,而不复制引用对象本身.
深层复制:复制引 ...

  3. stm32的串口中断

    下面有很多问题没有验证: 在设置USART_CR1中的TE位时,会发送一个空闲帧作为第一次数据发送, 目前我所了解的串口中断发送,有两种方式: 一个是:TC 一个是:TXE 这是判断两个标志位, 第一 ...

  4. [PReact] Integrate Redux with Preact

    Redux is one of the most popular state-management libraries and although not specific to React, it i ...

  5. 苹果APNS在app中的详细实现

    鉴于server稳定的开发难度非常大,小团队不建议自己开发.建议使用稳定的第三方推送方案,如个推,蝴蝶等. 要想使用苹果APNS推送消息,首先要把开发app的xcode所用证书上传到server上,当 ...

  6. 【69.77%】【codeforces 723A】The New Year: Meeting Friends

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  7. 解决maven项目找不到maven依赖的解决办法

    不同的IDE对应的.classpath中的maven声明也不一样,这样就会导致项目找不到maven依赖. 即Java Build Path--->Libraries中找不到Maven Depen ...

  8. js中单引号和双引号的区别（html中属性规范是用双引号，js中字符串规定是用单引号）（js中单引号区别和php很像：单引号快，双引号可转义字符，双引号可解析变量）

    js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量) 一.总结 1.html中属性规范是 ...

  9. [Docker] Create a Volume

    We can create volumn to keep the data, even we stop the container and restart again, the data won't ...

  10. 【物理/数学】概念的理解 —— pivot、position

    0. 基本释义 pivot: n. 枢轴:中心点:旋转运动 vt. 以-为中心旋转:把-置于枢轴上 vi. 在枢轴上转动:随-转移 adj. 枢轴的:关键的 position: n. 位置,方位:职位 ...