热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

在HTML或正文上实现背景图像的最佳方法

如何解决《在HTML或正文上实现背景图像的最佳方法》经验,为你挑选了1个好方法。

我有一个图像,我需要伸展全身,所以我不知道什么是最好的方法来做到这一点

html{
  /*background image properties*/
}

要么

body{
  /*background image properties*/
}

Gerwin.. 23

body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

这将是最好的方法,你可以将它应用到HTML,它真的取决于你喜欢什么...

background-image:url('../images/background.jpg');

假设您的css文件位于不同的地图中,您可以../转到放置css文件夹的地图,然后进入图像文件并选择图像.

background-attachment:fixed;

设置背景图像时,我个人喜欢使用它,这使得当用户滚动时,背景图像保持其当前位置.

background-repeat: no-repeat;

使用此设置时,它会使图像不会重复,以防图像太小或者不会覆盖整个背景.

background-size: cover;

应用此选项时,您将设置背景大小以覆盖,结合使用no-repeat,attachment: fixed这样可以为背景图像添加样式



1> Gerwin..:
body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

这将是最好的方法,你可以将它应用到HTML,它真的取决于你喜欢什么...

background-image:url('../images/background.jpg');

假设您的css文件位于不同的地图中,您可以../转到放置css文件夹的地图,然后进入图像文件并选择图像.

background-attachment:fixed;

设置背景图像时,我个人喜欢使用它,这使得当用户滚动时,背景图像保持其当前位置.

background-repeat: no-repeat;

使用此设置时,它会使图像不会重复,以防图像太小或者不会覆盖整个背景.

background-size: cover;

应用此选项时,您将设置背景大小以覆盖,结合使用no-repeat,attachment: fixed这样可以为背景图像添加样式


推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 最近学习了关于使用最为流行的jquery发送请求,在实践中以最为简单的聊天室作为测验的辅助工具,对相关网页开发有一个初步的认识,希望大家能够一起学习进步。首先介绍一下 ... [详细]
  • React图片输入框移动端网页_018
    React-图片输入框-移动端网页gitHub地址觉得有参考价值,点个赞https:github.comxiaopingzh…目录结构.├──README.md├──dist│├─ ... [详细]
  • 记一道腾讯前端笔试题
    我今年4月投递了腾讯前端开发岗位,很可惜笔试题没通过,48小时内给出答案回复面试官,我的答案太过于简单,所以后面面试官估计也就懒得回我这个菜鸡来(嘤嘤嘤)。当然以我现在的眼光来重新 ... [详细]
  • 一款清新的jQuery日历插件带日期的Tooltip提示543人浏览发表回复这是一款非常简单清新的jQuery日历插件,它并没有特别的日期或者时间选择功能,仅仅是展示一个简单的日历控件。这款jQu ... [详细]
  • Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
  • 你有什么见解
    本文主要介绍关于html5,css3的知识点,对【关于雾霾网站设计】和【你有什么见解】有兴趣的朋友可以看下由【-你在暮色中】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的【】相关技术问题。你有 ... [详细]
  • 简介:文章中的知识:CSS3,Web工作线程,本地存储,画布,地理定位,新表单,音频视频第一章:认识HTML5HTML5是最新版本的HTML,它引入了简化的标记, ... [详细]
  • 本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ... [详细]
  • 简单了解markdown语法
    Markdown语法标题三个“#”表示三级标题四个“#”表示四级标题字体粗体左右加俩“*”斜体左右加一’‘*“粗斜体左右加三个”*“表示删掉用俩波浪线引用加空格分割线图片![ ... [详细]
  • 这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ... [详细]
  •   html5与js,  本文介绍html5shiv.js和respond.min.js与大家分享,如下:  做 ... [详细]
  • 前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • 怎么使用css3画三角形
    小编给大家分享一下怎么使用css3画三角形,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!首先看一下css3画三角形的原理我们先来看 ... [详细]
  • 1、给边框加上圆角及阴影,如下代码:<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ... [详细]
author-avatar
NAVETEX
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有