- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这可能是一个非常基本的问题,但我无法解决:添加 Max-Width 媒体查询后,当窗口处于特定宽度( 714px )时,我尝试禁用正文背景图像,但它没有用。然而,除了禁用背景图像和只有一种颜色之外,所有其他 CSS 命令在 body 上都可以正常工作,这是下面的代码,任何人都可以帮忙吗?
body {
background-color: #737373;
background-image: url(../Images/bkgd.jpg);
background-size: cover;
color: #3A3A3A;
text-align: left;
font-family: advent-pro;
font-style: normal;
margin: 0px;
font-weight: 400;
font-size: 1.8em;
}
.NavListItem {
float: left;
}
.NavListItem a {
margin: 0px;
text-decoration: none;
display: block;
padding-left: 20px;
color: #232323;
font-size: 1.2em;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
.NavListItem a:hover {
color: black;
background-color: aquamarine;
}
section {
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,0.92) 49.74%,rgba(255,255,255,0.25) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,0.92) 49.74%,rgba(255,255,255,0.25) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,0.92) 49.74%,rgba(255,255,255,0.25) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,0.92) 49.74%,rgba(255,255,255,0.25) 100%);
font-size: 1.5em;
}
.NavBar {
padding: 0px;
margin: 0px;
list-style-type: none;
overflow: hidden;
}
nav {
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(201,201,201,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(201,201,201,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(201,201,201,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(201,201,201,1.00) 100%);
}
footer {
clear: both;
margin: 0PX;
text-align: center;
position: fixed;
left: 0px;
bottom: 0px;
height: 80px;
width: 100%;
padding-top: 56px;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 78.24%,rgba(255,255,255,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 78.24%,rgba(255,255,255,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 78.24%,rgba(255,255,255,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 78.24%,rgba(255,255,255,1.00) 100%);
}
.AsideRight {
width: 55%;
clear: right;
float: right;
border-top-right-radius: 50px;
margin-right: 5%;
margin-left: 1%;
padding-left: 2.5%;
padding-right: 2.5%;
margin-top: 30px;
padding-bottom: 42px;
margin-bottom: 68px;
padding-top: 24px;
}
h1 {
font-size: 3em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
line-height: 1em;
text-align: center;
color: #EFEFEF;
text-shadow: 2px 2px 10px #353535;
}
h2 {
text-align: center;
font-size: 2.em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 2em;
}
.AsideLeft {
width: 28%;
float: left;
margin-right: 1%;
margin-left: 5%;
padding-bottom: 0px;
}
header {
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}
.NavList {
padding: 0px;
margin: 0px;
list-style-type: none;
overflow: hidden;
}
.container-fluid .navbar-header .navbar-brand {
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
color: #3F3F3F;
}
@media (max-width : 714px ){
.AsideLeft {
width: 90%;
float: none;
margin-right: 5%;
margin-left: 5%;
padding-bottom: 0px;
}
.AsideRight {
width: 90%;
clear: right;
float: none;
border-top-right-radius: 50px;
margin-right: 5%;
margin-left: 5%;
}
h1 {
font-size: 2.2em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
line-height: 1em;
text-align: center;
color: #EFEFEF;
text-shadow: 2px 2px 10px #353535;
}
body {
background-color: #737373;
/* background-image: url(../Images/bkgd.jpg);
*/ background-size: cover;
color: #3A3A3A;
text-align: left;
font-family: advent-pro;
font-style: normal;
margin: 0px;
font-weight: 400;
font-size: 1.8em;
}
}
<!doctype html>
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website design</title>
<!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> -->
<link href="css/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">
<link href="Css File/styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-image: url(Images/Carousel_4.jpg);
}
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/actor:n4:default;alfa-slab-one:n4:default;aclonica:n4:default;advent-pro:n4:default.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="padding-top: 70px">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Mazen | First Website Design</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active NavListItem"><a href="#">Home<span class="sr-only">(current)</span></a></li>
<li class="NavListItem"><a href="Portfolio.html">Portfolio</a></li>
<li class="NavListItem"><a href="Contact.html">Contact</a></li>
<li class="NavListItem"><a href="About.html">About </a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header><img src="Images/Logo.png" width="80" height="80" alt=""/></header>
<aside class="AsideLeft">
<h1>What can i create for you</h1>
</aside>
<section class="AsideRight">
<h2> Creating compelling branding </h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metusloremipsum</p>
</section>
<footer> Copy rights 2017 100% recycled content</footer>
<script src="js/jquery-1.11.3.min.js"></script>
<!-- <script src="js/bootstrap.js"></script> -->
<script src="js/bootstrap-3.3.7.js"></script>
</body>
</html>
最佳答案
尝试添加background: none
@media all and (max-width: 712px)
{
background: none;
background-color: #737373;
background-size: cover;
color: #3A3A3A;
text-align: left;
font-family: advent-pro;
font-style: normal;
margin: 0px;
font-weight: 400;
font-size: 1.8em;
}
关于css - 添加Max-Width媒体查询后,背景图不会消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42548050/
快速且可能简单的 Lambda 问题: 我有一家有评论的餐厅。我想查询具有以下内容的那个: 最大(平均评分) 和 Max(ReviewCount) 和 Max(NewestReviewDate) 和
在尝试使用 C++17 折叠表达式时,我尝试实现 max sizeof ,其中结果是类型 sizeof 的最大值。我有一个使用变量和 lambda 的丑陋折叠版本,但我想不出一种使用折叠表达式和 st
我目前正在使用 C 并遇到了一些我觉得有趣的东西,但似乎在这里找不到任何类似的东西。 我正在为数组(大小 1000000)静态分配内存。我知道这相当大并且有可能引起问题。但是,使用 10^6 不会出现
我有一个具有 max-height 的 div 和其中的图像,应该使用 max-width:100% 和 max-height:100%。在 Chromium 中,这是可行的,但 Firefox 仅使
我有一个最大高度的 div 和里面的一个图像,它应该使用最大宽度:100% 和最大高度:100%。在 Chromium 中,这是可行的,但 Firefox 仅使用最大宽度而忽略最大高度。 div#ov
在一本在线 awk 手册中我找到了例子awk '{ if (NF > max) max = NF } END { print max }' 该程序打印任何输入行上的最大字段数。但我不明白 awk 如何
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在制作一个非循环图数据库。 表 Material (id_item,id_collection,...)主键(id_item,id_collection) (item可以是collection本身
我有以下两个表。 1.电影详情(电影ID、电影名称、评分、票数、年份) 2.电影类型(Movie-ID,Genre) 我正在使用以下查询来执行连接并获得每个评分最高的电影流派。 select Movi
我有一个查询,我想返回 idevent 中给定传感器 ID (sensorID) 范围内的最高 ID 值,但是查询没有返回最高值。 我运行查询时减去 max() 语句的结果: mysql> SELEC
SUM(MAX() + MAX()) 有正确的方法吗? 这是我一直在努力做的事情 SELECT SUM(MAX(account.BALANCE1) + MAX(account.BALANCE2))
这个问题类似于CSS media queries: max-width OR max-height , 但由于我的代表不够高,我无法在回复中添加评论(问题),我想在原始问题中添加。 与其他主题中的发帖
Jon Skeet今天报告(source): Math.Max(1f, float.NaN) == NaN new[] { 1f, float.NaN }.Max() == 1f 为什么? 编辑:双倍
这个问题已经有答案了: Java 8 stream's .min() and .max(): why does this compile? (5 个回答) 已关闭 7 年前。 我正在学习1z0-809
我在处理一些数据库记录时遇到了一些挑战。 我需要为特定列获取具有 MAX 值的行,并且这些记录必须介于两个时间戳值之间。 这是SQL查询 SELECT id, MAX(amount), created
我想在媒体查询中使用 AND 条件。我使用了下面的代码,但是没有用 @media screen and (max-width: 995px AND max-height: 700px) { } 最佳答
在编写 CSS 媒体查询时,有什么方法可以用“或”逻辑指定多个条件吗? 我正在尝试做这样的事情: /* This doesn't work */ @media screen and (max-widt
我对仅使用 max(list array) 和 np.max(list array) 之间的区别有疑问。 这里唯一的区别是 Python 返回代码所需的时间吗? 最佳答案 它们在边缘情况下可能不同,例
例如: a = [[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.
这个问题在这里已经有了答案: Java 8 stream's .min() and .max(): why does this compile? (5 个答案) 关闭 6 年前。 我正在学习 1z0
我是一名优秀的程序员,十分优秀!