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. vue 中监听页面滚动

    监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...

  2. re模块、正则表达式

    一.正则表达式 1.正则表达式不是Python独有的,它是一门独立的技术,所有的编程语言都可以使用正则表达式,在Python中使用正则表达式就要借助于re模块,或者是支持正则表达式书写的方法. 2.用 ...

  3. git拉取代码

    1,用sourcetree拉取的时候 遇到  fatal: repository 'http://gitlab.xxx.com/XXX/XXX.git/' not found 2,可以直接在要存放代码 ...

  4. 2020 CCPC Wannafly Winter Camp Day1 - I. K小数查询(分块)

    题目链接:K小数查询 题意:给你一个长度为$n$序列$A$,有$m$个操作,操作分为两种: 输入$x,y,c$,表示对$i\in[x,y] $,令$A_{i}=min(A_{i},c)$ 输入$x,y ...

  5. 【PAT甲级】1072 Gas Station (30 分)(Dijkstra)

    题意: 输入四个正整数N,M,K,D(N<=1000,M<=10,K<=10000)分别表示房屋个数,加油站个数,路径条数和加油站最远服务距离,接着输入K行每行包括一条路的两条边和距 ...

  6. python、js实现WGS84、高德(火星)、百度坐标转换

    在日常工作学习中常会涉及到WGS84.高德(火星/谷歌).百度三种空间坐标系的坐标转换,本文将通过python.js两种语言实现坐标系的转换. 坐标系说明: wgs84:为一种大地坐标系,也是目前广泛 ...

  7. 腾讯云Windows Server下nodejs websocket ssl配置

    1.从腾讯云申请SSL证书,下载解压,得到如下文件: 2.nodejs代码: // wss.js const fs = require('fs'); // 一些配置信息 const cfg = { p ...

  8. 最长公共子序列-Hdu1159

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  9. list的使用-Hdu 1276

    士兵队列训练问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  10. centosflask+uWSGI+nginx部署

    centosflask+uWSGI+nginx部署 1.      概念 Flask自带webserver--Werkzeug,可以搭建服务,运行网站.但在开发时,一般会用专业的--uWSGI. 另外 ...