1. img插入图片,用的最多,比如产品展示类

.section img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}

2. 背景图片一般用于小图标背景或者超大背景图片

.aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat; background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景图片更该位置 用 background-position */
}

CSS - 插入图片img和背景图片的更多相关文章

  1. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  2. CSS再学习 之背景色 背景图片

    背景色 p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距. p {background-color: gray; padding: ...

  3. php 合并图片 (将活动背景图片和动态二维码图片合成一张图片)

    <?php //案例一:将活动背景图片和动态二维码图片合成一张图片 //图片一 $path_1 = './background.png'; //图片二 $path_2 = './FU0851_2 ...

  4. css里面如何设置body背景图片满屏

    @{    Layout = null;    ViewBag.Title = "Login Page";} <!DOCTYPE html> <html>& ...

  5. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  6. CSS 背景图片的定位和缩放

    在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...

  7. 不用css样式表和背景图片实现圆角矩形,超简洁!

    当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...

  8. CSS背景图片

    1.背景图片插入 代码格式:background-image:url(): 括号内填写图片路径 2.背景图片设置大小 代码格式:background-size:宽.高 3.背景图片设置不平铺 代码格式 ...

  9. CSS background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

随机推荐

  1. Clausen Functions (and related series, functions, integrals)

    Since the Clausen functions are intimately related to a number of other important special functions, ...

  2. 吴裕雄 python 机器学习——模型选择回归问题性能度量

    from sklearn.metrics import mean_absolute_error,mean_squared_error #模型选择回归问题性能度量mean_absolute_error模 ...

  3. php自动读取文件夹下所有图片

    $path = 'xxxxx';///当前目录$handle = opendir($path); //当前目录while (false !== ($file = readdir($handle))) ...

  4. Shiro入门学习之自定义Realm实现认证(四)

    一.概述 Shirom默认使用自带的IniRealm,IniRealm从ini配置文件中读取用户的信息,而大部分情况下需要从系统数据库中读取用户信息,所以需要实现自定义Realm,Realm接口如下: ...

  5. python练习:斐波那契数列的递归实现

    python练习:斐波那契数列的递归实现 重难点:递归的是实现 def fib(n): if n==0 or n==1: return 1 else: return fib(n-1)+fib(n-2) ...

  6. SQLite - C/C++接口 API(二)

    1.打开数据库 SQLITE_API int sqlite3_open16( const void *filename, /* Database filename (UTF-16) */ sqlite ...

  7. 老段带你学鸟哥Linux视频教程 包含基础班+提高班

    老段带你学鸟哥Linux视频教程 包含基础班+提高班,附带pdf文档. 目录结构如下: 目录:/-老段带你学鸟哥Linux视频教程 [.9G] ┣━━老段带你学鸟哥-服务器篇 [1009.4M] ┃ ...

  8. ANSYS布尔运算APDL

    目录 1.交运算 2.加运算 3.减运算 4.分割 5. 搭接 6. 互分 6.粘结 1.交运算 交运算的结果是由每个初始图元的共同部分,形成一个新的图元. 命令 功能 备注 LINL 线与线的交 A ...

  9. 【原】从浏览器数据一个URL的全过程

    1.根据域名到DNS找到IP 2.根据IP建立TCP三次握手连接 3.连接成功发出http请求 4.服务器响应http请求 5.浏览器解析html代码并请求html中的静态资源(js/css) 6.关 ...

  10. Python中的代码块及其缓存机制、深浅copy

    一.代码块及其缓存机制 代码块 一个模块.一个函数.一个类.一个文件等都是一个代码块:交互式命令下,一行就是一个代码块. 同一个代码块内的缓存机制(字符串驻留机制) 机制内容:Python在执行同一个 ...