本篇文章给大家带来的内容是关于html实现像百度的首页效果一样的背景图(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

之前在百度知道我提问过这一个问题,后来解决了。不过好多人来问我时怎么解决的,源码。

其实很简单。这里我贴一下代码。有需要的小伙伴不用再加我qq了,直接来这里取吧。

里面的图片是我随便找的。

html,

body {

height: 100%;

}

body {

margin: 0;

background-repeat: no-repeat;

background-size: cover;

background-position: center;

background-attachment: fixed;

background-image: url(http://pic1.win4000.com/wallpaper/b/589d687069ed9.jpg);

}

h1{

height: 100%;

width: 100%;

margin: 0;

padding: 0;

color:#fff;

background-color: rgba(0,0,0,0.5);

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

justify-content: center;

align-items: center;

}

按住Ctrl+滚动滚轮:可以看到文字缩放,背景不动

html制作百度首页的图片不显示,html实现像百度的首页效果一样的背景图(代码)...相关推荐

  1. html怎么做成多彩背景随心换,html实现像百度的首页效果一样的背景图(代码)...

    本篇文章给大家带来的内容是关于html实现像百度的首页效果一样的背景图(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前在百度知道我提问过这一个问题,后来解决了.不过好多人 ...

  2. html鼠标悬停事件 dw,dw制作鼠标放上去图片就显示鼠标离开图片就消失

    今天小编就为大家介绍dw制作鼠标放上去图片就显示鼠标离开图片就消失的效果,操作方法很简单的,不会的朋友可以参考本文哦! 操作步骤: 1.新建"HTML文档",在"布局&q ...

  3. php搜索图片不显示不出来了,PHP CURL采集百度搜寻结果图片不显示问题的解决方法【第1/4页】...

    1.根据关键字采集百度搜寻结果 根据关键字采集百度搜寻结果,可以使用curl实现,代码如下:<?php function doCurl($url, $data=array(), $header= ...

  4. html代码里面换图片不显示不出来了,微擎 Ueditor 百度编辑器 替换图片不显示问题...

    问题: 最近在使用微擎添加公众号平台文章时,上传图片可以显示,但是点击 html(编辑器的按钮,可以显示html代码) 时出现图片不显示问题. 我是用的135编辑器挑选的图文模板,我替换完模板中的图片 ...

  5. html雪碧图效果,8.使用背景图,制作雪碧图效果

    本文将为您描述8.使用背景图,制作雪碧图效果,具体操作方法: 使用背景图,制作雪碧图效果: Document .img{ width:150px; height:150px; border:2px s ...

  6. 百度css3背景图代码,CSS3 实现花式背景图案

    CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景,事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果,例如参照css3patterns.本篇就举几个例子介绍一下它们 ...

  7. php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码

    用什么代码实现?不允许有白色底色产生,因为手机高度不一样 设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面 错误的写法:加到div中结合图片设置min-height, ...

  8. win 2012 iis 401 - 未授权: 由于凭据无效,访问被拒绝。您无权使用所提供的凭据查看此目录或页面,百度编辑器等图片无法显示

    这个问题是权限问题.可以在 选择匿名身份验证,点击编辑,选择 即可.

  9. 百度php editor图片上传到其他盘,百度编辑器Editor图片独立上传

    将百度编辑器中的图片独立出来上传: html:代码 var myEditorImage,d,myEditorImage = new UE.ui.Editor(); myEditorImage.rend ...

最新文章

  1. “我被机器解雇了!”Amazon 63岁员工因算法评分太低被自动开除
  2. 手机不断进入recovery mode
  3. Oracle数据库的impdp导入操作以及dba_directories使用方法
  4. SRM遇到的一个数论技巧——最大公约数和最小公倍数的关系
  5. 编程心法 之什么是MVP What is MVP development?
  6. tom大叔blog--------深入理解javascript系列-----------笔记
  7. 将JAR依赖项添加到Eclipse插件Maven Tycho构建
  8. perror()与strerror()的应用及区别 man手册查询
  9. android java.net.ConnectException: Connection 127.0.0.1:8080 refused
  10. JavaScript中unescape函数
  11. javascript 代码段整理
  12. linux系统可以安装Adobe,Ubuntu 64位安装Adobe Reader 9.5.5
  13. HAL库版STM32双轮自平衡车(三) ———代码精讲
  14. 在html中写for循环表格trtd,嵌套的HTML表格在javascript for循环
  15. python087(文件—文件概念以及文本文件和二进制文件的区别)
  16. 关于nodejs gm的各种各样的问题解决方法集合(中文乱码,non-conforming drawing,��Ч���� )
  17. React ,Redux 教程汇总
  18. 【肆】财务自由的三大核心工具
  19. 【Web技术】1189- 你不知道的前端音视频知识
  20. 计算机网络核心知识之局域网、广域网、城域网(超细致)

热门文章

  1. grub 引导 多linux系统,GRUB 多系统引导
  2. manifold learning 流形学习 zz
  3. 详细解读java IO
  4. Data Mining的十种分析方法
  5. Codeforces 1188 题解
  6. 索尼a5100_【大象原创】索尼微单最全功能就在这里啦
  7. Way to configure the logon navigaion layouts via Business Roles in CRM
  8. [C#] - 从 HTML 代码中 转换 / 提取 可读文字(PlainText)的方法
  9. tomcat7.0配置CORS(跨域资源共享)
  10. 5 个最受人喜爱的开源 Django 包