CSS线性梯度左右50％移动顶部和底部
我的基本要求是使第2列具有50％的红色（左）和50％的白色（右），左列具有文本，右列具有图像。在较大到常规屏幕上，我的解决方案都能很好地工作。使用引导程序4，自然地，第2列将从顶部到底部从一侧到另一侧。由于我使用'linear-gradient'来设置背景颜色，因此我进行了快速媒体查询，并将颜色设置为top和bottom。
问题是，我必须总是弄乱/写不同的媒体查询，并且一个屏幕大小总是这样破裂
我编写了多个媒体查询，并对图像列的颜色％和最大高度进行了调整。看来我从根本上做错了事。有更好的自举解决方案吗？还是在所有屏幕上都可以使用的更好的CSS？
.app-headline {
background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}
@media screen and (max-width: 992px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
}
.app-headline .text-content-left {
background: #d4272e;
}
.app-headline .img-content-right {
background: #fff;
max-height: 24rem;
}
}
@media screen and (max-width: 768px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
}
.app-headline .img-content-right {
background: #fff;
max-height: 17rem;
}
}
@media (min-width: 768px) and (max-width: 768px) {}<html>
<head>
<title>Products slider</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
</head>
<body>
<div class="pt-4 pb-4">
<h1>test</h1>
</div>
<section class="app-headline border">
<div class="container">
<div class="row py-5 text-white">
<div></div>
<div class="col-lg-6 pb-4 text-content-left">
<div class="text-content-left-texts">
<div class="inner-push-left">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 img-content-right align-self-center">
<img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
</div>
</div>
</div>
</section>
<script type="text/javascript">
</script>
</body>
</html>
<!--
<section class="product-promotion-display border">
<div class="">
<div class="row no-gutters d-flex justify-content-center text-white">
<div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
<div class="text-content-left-texts p-5 ">
<div class="inner-push-left offset-lg-3">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
<img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
</div>
</div>
</div>
</section> -->
2 个答案:
答案 0 :(得分：1)
您需要从媒体查询中删除以下内容，并且可以尝试使用伪元素进行着色以创建溢出并隐藏白色部分：
.app-headline .text-content-left {
background: #d4272e;
}
完整代码：
.app-headline {
background: linear-gradient(to left, #fff 50%, #d4272e 50%);
overflow:hidden;
}
@media screen and (max-width: 992px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
}
.app-headline .text-content-left {
position:relative;
z-index:0;
}
.app-headline .text-content-left::before {
content:"";
position:absolute;
top:0;
left:-50vw;
right:-50vw;
bottom:0;
z-index:-1;
background: #d4272e;
}
.app-headline .img-content-right {
background: #fff;
max-height: 24rem;
}
}
@media screen and (max-width: 768px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
}
.app-headline .img-content-right {
background: #fff;
max-height: 17rem;
}
}
@media (min-width: 768px) and (max-width: 768px) {}<html>
<head>
<title>Products slider</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
</head>
<body>
<div class="pt-4 pb-4">
<h1>test</h1>
</div>
<section class="app-headline border">
<div class="container">
<div class="row py-5 text-white">
<div></div>
<div class="col-lg-6 pb-4 text-content-left">
<div class="text-content-left-texts">
<div class="inner-push-left">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 img-content-right align-self-center">
<img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
</div>
</div>
</div>
</section>
<script type="text/javascript">
</script>
</body>
</html>
<!--
<section class="product-promotion-display border">
<div class="">
<div class="row no-gutters d-flex justify-content-center text-white">
<div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
<div class="text-content-left-texts p-5 ">
<div class="inner-push-left offset-lg-3">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
<img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
</div>
</div>
</div>
</section> -->
答案 1 :(得分：0)
请按照以下说明操作：-
这里48是您的顶部空白，而26是您左侧区域的底部填充。进行刷新检查。
var height = jQuery(".app-headline .text-content-left").height();
var actual_height = height + 48 + 26 + 'px';
jQuery(".app-headline").css("background","linear-gradient(to bottom, #d4272e " + actual_height.toString() + ", #fff 50%)"); .app-headline {
background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}
@media screen and (max-width: 992px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
}
.app-headline .text-content-left {
background: #d4272e;
}
.app-headline .img-content-right {
background: #fff;
max-height: 24rem;
}
}
@media screen and (max-width: 768px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
}
.app-headline .img-content-right {
background: #fff;
max-height: 17rem;
}
}
@media (min-width: 768px) and (max-width: 768px) {}<html>
<head>
<title>Products slider</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
</head>
<body>
<div class="pt-4 pb-4">
<h1>test</h1>
</div>
<section class="app-headline border">
<div class="container">
<div class="row py-5 text-white">
<div></div>
<div class="col-lg-6 pb-4 text-content-left">
<div class="text-content-left-texts">
<div class="inner-push-left">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 img-content-right align-self-center">
<img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
</div>
</div>
</div>
</section>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？