one div as the other one's background

最新推荐文章于 2024-04-23 18:35:32 发布
最新推荐文章于 2024-04-23 18:35:32 发布
阅读量92 收藏
点赞数
分类专栏： css 文章标签： XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tsailer/article/details/83917383
版权
[color=blue][b]method 1[/b][/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--
[color=red].top{height:200px;width:300px;background:#FF0000;z-index:11;position:absolute;}
.back{height:200px;width:300px;background:#00FF00;position:absolute;z-index:0;}[/color]
-->
</style>
</head>

<body>
<div class="top"></div>
<div class="back"></div>
</body>
[color=blue]</html>
[b]method 2[/b][/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--
[color=red].back{height:200px;width:300px;background:#00FF00;}
.top{height:200px;width:300px;background:#FF0000;margin-top:-200px;}[/color]
-->
</style>
</head>

<body>
<div class="back"></div>
<div class="top"></div>
</body>
</html>
[color=blue][b]method 3[/b][/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--
[color=red].back{height:200px;width:300px;background:#00FF00;}
.top{height:200px;width:300px;background:#FF0000;position:absolute;}[/color]
-->
</style>
</head>
<body>
<div class="top"></div>
<div class="back"></div>
</body>
</html>
新枯木逢春
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css怎样实现三个div并排,如何使用CSS并排浮动3个div？
weixin_33806343的博客
08-03 1560
Just give them a width and float: left;, here's an example:Left StuffMiddle StuffRight StuffThe modern way is to use the CSS flexbox, see support tables..container {display: flex;}.container > div ...
用一个DIV画图通过background-image叠加实现
12-13
本篇将深入探讨如何利用`background-image`属性结合渐变效果，如`radial-gradient`（径向渐变）和`linear-gradient`（线性渐变），在一个`div`元素中绘制复杂的图像。 首先，让我们看看`background-image`属性。这...
CSS3实现的单div图标
webdev
05-05 211
最近研究纯css3实现绘图，无意中找到one-div.com,利用一个div去实现一个图标，如下图所示。牛，研究研究。 利用css实现的icon可以方便的进行缩放而不失真，同时添加动画效果也变得轻而易举。 下面来实现下礼品的这个，--demo-- 1.难点分析 一个div实现这个效果，刚开始会不够用，尤其是礼品盒下面的四个盒子。 div做一个矩形，剩下的几个用box-shadow...
jQuery子元素选择器
热门推荐
何明洋的编程技术博客
06-28 1万+
jQuery子元素选择器&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;    &lt;title&gt;子元素选择器&lt;/title&gt; &lt;meta charse
html5 css background,HTML5 Canvas as CSS background-image?
weixin_31983133的博客
06-19 195
问题Is it possible to make the background image of a DIV a canvas that can be modified with getContext("2d")?回答1:You can have a canvas inside the div with absolute css position, other elements have to h...
[JavaScript Beginner‘s Guide]Background and introduction
最新发布
代码中枢：软件工程理论与实践的桥梁
04-23 1101
【代码】[JavaScript Beginner's Guide]Background and introduction。
CSS：Tutorial one
weixin_33716557的博客
03-09 168
1、Three Ways to Insert CSS External style sheet Internal style sheet Inline style External Style Sheet With an external style sheet, you can change the look of an entire website by changing j...
Reduce opacity of div's background without affecting contained element
SalmonellaVaccine的专栏
03-23 695
http://css-tricks.com/rgba-browser-support/ RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this: div { background: rgba(200, 54, 54, 0.5);
前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js
wilsonke的专栏
08-30 1886
1 Introduction In this article we are going to compare three popular MV* frameworks for the web: AngularJS vs. Backbone vs. Ember. Choosing the right framework for your project can have a huge im
css中div和spand,You can still use div
weixin_42402241的博客
08-04 389
48 Responses on the article “You can still use div”zcorpan says:> * For those who haven’t encountered this term before, flow content elements are the same as HTML 4’s block-level content elements.N...
通过js获取div的background-image属性
01-21
之前没有注意过div的background-image这个属性，只是设置它的url，今天遇到一个问题特此做一下记录。 代码如下: <div id=”img_2″ xss=removed xss=removed></div> 在js中想获取image属性 代码如下: document....
div背景定位background设置元素的背景参数
12-13
我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我...DIV背景定义参数：background 设置元素的背景参数，其中属性依在写博客之前 我都是会把
jQuery的one()方法用法实例
10-24
其中，$("div").one("click",function() {...})部分即为使用one()方法的部分。 - 在点击div元素后，会在div中添加指定的内容，但之后再次点击div时，之前绑定的one()事件处理函数不再执行，因为该函数在首次触发后...
当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号
tsailer的专栏
01-10 1946
Document   body{ background-color:pink; font-size:24px; text-align:center; } p{ line-height:0.86; }     function clickme(x){ var dom=document.getElementsByTagName("p"); //该点击的节点 for(
想不继承body style
tsailer的专栏
08-06 493
<br />想不继承body style，那么你重写内部的style
div clear float
tsailer的专栏
05-05 357
<br /><div style="clear:both;"></div>
为什么web标准中IE无法设置滚动条颜色了
tsailer的专栏
05-09 355
还在完善中...... new document aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
怎样使一个层垂直居中于浏览器中
tsailer的专栏
05-09 341
new document
div background image
07-27
回答: 在使用div标签设置背景图片时，可以通过CSS的background-image属性来实现。\[1\]通过设置div的class或id，并在CSS样式中指定background-image的URL，可以将图片作为背景显示在div元素中。与使用img标签显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值