<div class='container' style='width:1200px;margin:0 auto;'>

　　<div style='width:200px;margin:0 auto;height:164px;'><img src='XXX'></div>

</div>

container外 新增一行满屏div   设置z-index: -1  并且调整位置

<div style="width: 100%;height: 164px;background-color: #e8e8e8;display: inline-block;position: relative;top: -674px;z-index: -1"></div>

css技巧 1200px居中容器中某个div增加横屏背景的更多相关文章

  1. 用纯 CSS 创作一个在容器中反弹的小球

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教 ...

  2. 前端每日实战：46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...

  3. CSS技巧！像table一样布局div

    摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个 ...

  4. 46.纯 CSS 创作一个在容器中反弹的小球

    原文地址:https://segmentfault.com/a/1190000015221260 练习地址:https://scrimba.com/c/c3GEWmTb 感想: 原来animation ...

  5. css和jQuery ，字符串中重新定义单个字符样式背景

    <table class="tb2"> <tr><td class="td1">融资登记企业<span>985& ...

  6. css 如何使图片与文字在div中居中展示？

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  7. 高阶 CSS 技巧在复杂动效中的应用

    最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- ...

  8. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

随机推荐

  1. laravel-admin

    laravel-admin 文档地址: http://laravel-admin.org/docs/#/zh/

  2. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  3. 2018-8-10-C#-快速释放内存的大数组

    title author date CreateTime categories C# 快速释放内存的大数组 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17 ...

  4. NOIP模拟 17.8.15

    NOIP模拟17.8.15 A 债务文件名 输入文件 输出文件 时间限制 空间限制debt.pas/c/cpp debt.in debt.out 1s 128MB[题目描述]小 G 有一群好朋友,他们 ...

  5. iscroll5在使用情况下click事件失效的问题

    转载自:http://www.52html5.com/?p=2618 Bug描述: iOS.android4.4+下不能触发click事件. Bug解决: 调用iscroll插件,增加配置参数:cli ...

  6. 链表经典题Merge Two Sorted Lists

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  7. html(),val(),text()的区别

    .html(),.text(),.val() 三种方法都是用来读取选定元素的内容: .html()是用来读取元素的HTML内容(包括其Html标签): .text()用来读取元素的纯文本内 容,包括其 ...

  8. AI种黄桃AI卖黄桃 阿里巴巴推进一站式政务服务

    7月11日,武汉城市峰会期间,武汉.枣阳.荆门等多个城市发布了同阿里巴巴的最新合作.这些合作包括用人工智能改善武汉交通拥堵.降低枣阳黄桃种植成本.提升荆门城市治理和市民服务水平等.阿里云.蚂蚁金服.高 ...

  9. python中defaultdict类

    回宿舍前翻翻Codeforces的时候发现了一个有趣的代码．．其实是我没这么用过 :D 这是一份417B的代码 import sys from collections import defaultdi ...

  10. Servlet工作流程

    1.加载Servlet类 类加载器负责加载servlet类. 当Web容器接收到servlet的第一个请求时,将加载servlet类. 2.创建Servlet实例 Web容器在加载servlet类之后 ...