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. 2018VMware虚拟机安装Mac OS 10.12.1

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载安装中所需的镜像文件以及补丁工具 Mac OS 10.12.1 Sierra (16B2555) 懒人版(下载地址):ht ...

  2. 算法学习笔记（六） 二叉树和图遍历—深搜 DFS 与广搜 BFS

    图的深搜与广搜 复习下二叉树.图的深搜与广搜. 从图的遍历说起.图的遍历方法有两种:深度优先遍历(Depth First Search), 广度优先遍历(Breadth First Search),其 ...

  3. POJ 2752 Seek the Name, Seek the Fame （KMP)

    传送门 http://poj.org/problem?id=2752 题目大意:求既是前缀又是后缀的前缀的可能的长度.. 同样是KMP,和 HDU 2594 Simpsons' Hidden Tale ...

  4. Android内存优化杂谈

    Android内存优化是我们性能优化工作中比较重要的一环,这里其实主要包括两方面的工作: 优化RAM,即降低运行时内存.这里的目的是防止程序发生OOM异常,以及降低程序由于内存过大被LMK机制杀死的概 ...

  5. 4、linux下应用创建线程

    1.linux创建线程之pthread_create 函数简介 pthread_create是UNIX环境创建线程函数 头文件 #include<pthread.h> 函数声明 int p ...

  6. [Preact] Use State and Props in the Component Render Function

    Preact offers, in addition to the regular component API from React, the ability to access both props ...

  7. PWA之消息推送——Notification

    原文 简书原文:https://www.jianshu.com/p/69042b92cae1 大纲 1.推送通知的概念 2.消息推送的知识点 3.实例 1.推送通知的概念 大部分现代 Web 应用都需 ...

  8. 2020发布 .NET 5 下一代全平台 .Net 框架

    [翻译] 正式宣布 .NET 5 2019-05-07 01:18 by Rwing, 16515 阅读, 79 评论, 收藏, 编辑 原文: Introducing .NET 5 今天,我们宣布 . ...

  9. POJ 3628 Bookshelf 2 (01背包)

    Bookshelf 2 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7496   Accepted: 3451 Descr ...

  10. TextView之二：常用属性 分类： H1_ANDROID 2013-10-30 12:43 3203人阅读 评论(0) 收藏

    参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...