专栏首页用户7873631的专栏详解:42 background-position 记住,是左右上下的顺序的哈

详解:42 background-position 记住,是左右上下的顺序的哈

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<style type="text/css">
	div{
		width: 500px;
		height: 500px;
		border:1px solid red;
		background-image:url(images/king1.jpg);
		background-repeat: no-repeat;
	}
	.box1{
		background-position: right bottom;
	}
	.box2{
		background-position: right 50px bottom 100px;
	}
	.box3{
		background-position: left -50px top -100px;
	}
	</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 布局

    用户7873631
  • SAS第八篇 可变参数

    用户7873631
  • 移动端的box-shadow

    用户7873631
  • 网页结构与表现原则

    网页的结构与表现原则总的来说为: 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML与CSS契合度(精简页面结构) 我们可以通过一个微博用户发言信息列...

    就只是小茗
  • 18.CSS

    选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

    zhang_derek
  • CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline For...

    张果
  • 前端基础-CSS基础(八)

    efonfighting
  • 14. css3 media响应式样式示例

    在日常的样式编写中,对于浏览器宽度变化的时候,我们为了增加体验,总是需要根据变化进行响应式的样式设置。

    Devops海洋的渔夫
  • flask第34篇——测试器、模板继承

    http://jinja.pocoo.org/docs/2.10/templates/#list-of-builtin-tests

    用户2149234
  • 猿实战18——商品发布之类目选择

    猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,变身猿人找到...

    山旮旯的胖子

扫码关注云+社区

领取腾讯云代金券