如何使用css修复图像定位
我正在使用Web应用程序，并且尝试将图像放置在左右图像上，例如下面的图像，但是它会移动屏幕尺寸。如何正确调整左右图像。
我正在使用Web应用程序，并且尝试将图像放置在左右图像上，例如下面的图像，但是它会移动屏幕尺寸。如何正确调整左右图像。
* {
box-sizing: border-box;
}
ul,
nav {
list-style: none;
}
.pricing * {
margin: 0 auto;
}
section {
align-items: center;
}
.bg-gray{
background: #F2F2F2;
}
.container-fluid{
background: #fff
}
.flex-container-ctrl {
align-items: center;
width: 100%;
z-index: 9;
}
.flex-container {
display: flex;
padding: 1.9em;
max-width: 80%;
position: relative;
z-index: 1;
}
.flex-item {
flex: 1;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1.5em;
width: 90%;
}
.package {
border: 1px solid #eee;
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transition: 0.25s;
border-radius: 12px;
}
/* .package:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transform: scale(1.025);
} */
.package .header {
color: #fff;
font-size: 1.5em;
height: 124px;
}
.package .highlight {
background-color: #29b6f6;
border-radius: 12px 12px 0 0;
}
.package .heading:nth-of-type(1):before {
content: "Best Plan";
display: block;
padding: 5px 0;
background: #ffb100;
box-shadow: 0 1px 0 #c18705;
color: #fff;
border-radius: 25px;
width: 10%;
margin: -45px 70px;
position: absolute;
/* top: 1px; */
font-size: large;
transition: all 0.5s ease;
box-sizing: border-box;
letter-spacing: 0.13em;
}
.package .pricing-title {
float: left;
height: 10px;
font-size: 17px;
font-weight: bold;
}
.pricing-title .sub-pricing-title {
font-size: 10px;
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing-title img{
width: 19px;
height: auto;
}
.package .ctrl-pricing {
float: right;
height: 10px;
}
.ctrl-pricing .sub-pricing-title {
font-size: 10px;
}
.package li {
background-color: #fff;
/* border-bottom: 1px solid #eee; */
padding: 1.2em;
text-align: center;
height: 20px;
}
.package .gray {
/* background-color: #eee; */
font-size: 1.25em;
border-radius: 0 0 12px 12px;
height: inherit;
padding: 1.6em;
}
button {
background: #015496;
border: none;
border-radius: 25px;
color: #fff;
cursor: pointer;
padding: 0.51em 1.5em;
font-size: 16px;
font-weight: bold;
z-index: 99;
}
.font-clr {
color: #29b6f6;
}
.flower-right{
width: 34em;
height: 48em;
right: 0em;
bottom: 2px;
background: url(https://i.imgur.com/ScMV83t.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position:relative;
z-index: 0;
top: -2px
}
#rightflower{
background-position: 10px;
}
.flower-left{
width: 34em;
height: 51em;
left: -9em;
background: url(https://i.imgur.com/ttgZVYr.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
top: 15em;
float: left;
}
#leftflower{
background-position: 10px;
}
@media only screen and (max-width: 800px) {
button {
padding: -0.25em;
}
.flex-container {
flex-wrap: wrap;
}
.payment-method{
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
padding-bottom: 20px
}
.flower-left,.flower-right{
display: none;
}
.max-width{
max-width: 71%;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 9em;
}
}
@media only screen and (max-width: 700px) {
.flex-container {
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
}
.package:hover {
box-shadow: none;
transform: none;
}
button {
padding: -0.25em 1.5em;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 6.5em;
}
.ctrl-button{
padding: 2px 5px 0 5px !important;
}
.max-width{
max-width: 75%;
}
} <section class="pricing" id="pricing">
<div class="flex-container-ctrl">
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
</div>
</div>
<div class="flower-right" id="rightflower"></div>
<div class="flower-left" id="leftflower"></div>
</section>
希望任何人都可以帮助我解决我的问题
5 个答案:
答案 0 :(得分：1)
您应该通过这种方式对图像使用position:absolute和transform属性。
.flower-right {
width: 34em;
height: 48em;
right: 0;
bottom: 2px;
background: url(https://i.imgur.com/ScMV83t.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: 50%;
transform: translateY(-50%)
}
#rightflower {
background-position: 10px;
}
.flower-left {
width: 34em;
height: 51em;
left: 0;
background: url(https://i.imgur.com/ttgZVYr.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: 50%;
transform: translateY(-50%)
}
#leftflower {
background-position: 10px;
}
* {
box-sizing: border-box;
}
ul,
nav {
list-style: none;
}
.pricing * {
margin: 0 auto;
}
section {
align-items: center;
}
.bg-gray {
background: #F2F2F2;
}
.container-fluid {
background: #fff
}
.flex-container-ctrl {
align-items: center;
width: 100%;
z-index: 9;
}
.flex-container {
display: flex;
padding: 1.9em;
max-width: 80%;
position: relative;
z-index: 1;
}
.flex-item {
flex: 1;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1.5em;
width: 90%;
}
.package {
border: 1px solid #eee;
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transition: 0.25s;
border-radius: 12px;
}
/* .package:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transform: scale(1.025);
} */
.package .header {
color: #fff;
font-size: 1.5em;
height: 124px;
}
.package .highlight {
background-color: #29b6f6;
border-radius: 12px 12px 0 0;
}
.package .heading:nth-of-type(1):before {
content: "Best Plan";
display: block;
padding: 5px 0;
background: #ffb100;
box-shadow: 0 1px 0 #c18705;
color: #fff;
border-radius: 25px;
width: 10%;
margin: -45px 70px;
position: absolute;
/* top: 1px; */
font-size: large;
transition: all 0.5s ease;
box-sizing: border-box;
letter-spacing: 0.13em;
}
.package .pricing-title {
float: left;
height: 10px;
font-size: 17px;
font-weight: bold;
}
.pricing-title .sub-pricing-title {
font-size: 10px;
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing-title img {
width: 19px;
height: auto;
}
.package .ctrl-pricing {
float: right;
height: 10px;
}
.ctrl-pricing .sub-pricing-title {
font-size: 10px;
}
.package li {
background-color: #fff;
/* border-bottom: 1px solid #eee; */
padding: 1.2em;
text-align: center;
height: 20px;
}
.package .gray {
/* background-color: #eee; */
font-size: 1.25em;
border-radius: 0 0 12px 12px;
height: inherit;
padding: 1.6em;
}
button {
background: #015496;
border: none;
border-radius: 25px;
color: #fff;
cursor: pointer;
padding: 0.51em 1.5em;
font-size: 16px;
font-weight: bold;
z-index: 99;
}
.font-clr {
color: #29b6f6;
}
.flower-right {
width: 34em;
height: 48em;
right: 0;
bottom: 2px;
background: url(https://i.imgur.com/ScMV83t.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: 50%;
transform: translateY(-50%)
}
#rightflower {
background-position: 10px;
}
.flower-left {
width: 34em;
height: 51em;
left: 0;
background: url(https://i.imgur.com/ttgZVYr.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: 50%;
transform: translateY(-50%)
}
#leftflower {
background-position: 10px;
}
@media only screen and (max-width: 800px) {
button {
padding: -0.25em;
}
.flex-container {
flex-wrap: wrap;
}
.payment-method {
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
padding-bottom: 20px
}
.flower-left,
.flower-right {
display: none;
}
.max-width {
max-width: 71%;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 9em;
}
}
@media only screen and (max-width: 700px) {
.flex-container {
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
}
.package:hover {
box-shadow: none;
transform: none;
}
button {
padding: -0.25em 1.5em;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 6.5em;
}
.ctrl-button {
padding: 2px 5px 0 5px !important;
}
.max-width {
max-width: 75%;
}
}<section class="pricing" id="pricing">
<div class="flex-container-ctrl">
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
</div>
</div>
<div class="flower-right" id="rightflower"></div>
<div class="flower-left" id="leftflower"></div>
</section>
答案 1 :(得分：0)
我们需要调整position，请检查小提琴。
答案 2 :(得分：0)
您已经在此处发布了很多代码，需要自己删除主页的背景色，但除此之外，还可以。
创建一个名为background的div并将z-index设置为-1，然后对pagebody进行同样的操作并将z-index设置为1。这应该够了吧。只需将背景div设置为具有背景图像，或将图像以100%的宽度和高度放置在DIV中即可。
.background {
z-index: -1;
background-image: url("https://t3.ftcdn.net/jpg/01/94/75/70/240_F_194757077_Lv4ZT8XAOQRerY0vTA4grbAEwTHU9srK.jpg")
}
}
.pagebody {
z-index: 1;
}
* {
box-sizing: border-box;
}
ul,
nav {
list-style: none;
}
.pricing * {
margin: 0 auto;
}
section {
align-items: center;
}
.bg-gray{
background: #F2F2F2;
}
.container-fluid{
background: #fff
}
.flex-container-ctrl {
align-items: center;
width: 100%;
z-index: 9;
}
.flex-container {
display: flex;
padding: 1.9em;
max-width: 80%;
position: relative;
z-index: 1;
}
.flex-item {
flex: 1;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1.5em;
width: 90%;
}
.package {
border: 1px solid #eee;
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transition: 0.25s;
border-radius: 12px;
}
/* .package:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transform: scale(1.025);
} */
.package .header {
color: #fff;
font-size: 1.5em;
height: 124px;
}
.package .highlight {
background-color: #29b6f6;
border-radius: 12px 12px 0 0;
}
.package .heading:nth-of-type(1):before {
content: "Best Plan";
display: block;
padding: 5px 0;
background: #ffb100;
box-shadow: 0 1px 0 #c18705;
color: #fff;
border-radius: 25px;
width: 10%;
margin: -45px 70px;
position: absolute;
/* top: 1px; */
font-size: large;
transition: all 0.5s ease;
box-sizing: border-box;
letter-spacing: 0.13em;
}
.package .pricing-title {
float: left;
height: 10px;
font-size: 17px;
font-weight: bold;
}
.pricing-title .sub-pricing-title {
font-size: 10px;
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing-title img{
width: 19px;
height: auto;
}
.package .ctrl-pricing {
float: right;
height: 10px;
}
.ctrl-pricing .sub-pricing-title {
font-size: 10px;
}
.package li {
background-color: #fff;
/* border-bottom: 1px solid #eee; */
padding: 1.2em;
text-align: center;
height: 20px;
}
.package .gray {
/* background-color: #eee; */
font-size: 1.25em;
border-radius: 0 0 12px 12px;
height: inherit;
padding: 1.6em;
}
button {
background: #015496;
border: none;
border-radius: 25px;
color: #fff;
cursor: pointer;
padding: 0.51em 1.5em;
font-size: 16px;
font-weight: bold;
z-index: 99;
}
.font-clr {
color: #29b6f6;
}
.flower-right{
width: 34em;
height: 48em;
right: 0em;
bottom: 2px;
background: url(https://i.imgur.com/ScMV83t.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position:relative;
z-index: 0;
top: -2px
}
#rightflower{
background-position: 10px;
}
.flower-left{
width: 34em;
height: 51em;
left: -9em;
background: url(https://i.imgur.com/ttgZVYr.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
top: 15em;
float: left;
}
#leftflower{
background-position: 10px;
}
@media only screen and (max-width: 800px) {
button {
padding: -0.25em;
}
.flex-container {
flex-wrap: wrap;
}
.payment-method{
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
padding-bottom: 20px
}
.flower-left,.flower-right{
display: none;
}
.max-width{
max-width: 71%;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 9em;
}
}
@media only screen and (max-width: 700px) {
.flex-container {
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
}
.package:hover {
box-shadow: none;
transform: none;
}
button {
padding: -0.25em 1.5em;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 6.5em;
}
.ctrl-button{
padding: 2px 5px 0 5px !important;
}
.max-width{
max-width: 75%;
}
}<div class="background">
<!-- You don't need anything here unless you place the background image here rather than as a CSS background image. -->
</div>
<div class="pagebody">
<section class="pricing" id="pricing">
<div class="flex-container-ctrl">
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title">
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
</div>
</div>
<div class="flower-right" id="rightflower"></div>
<div class="flower-left" id="leftflower"></div>
</section>
</div>
答案 3 :(得分：0)
将位置更改为绝对
A B
0 t abc
1 ca t abc
2 foo bar
3 it xyz
* {
box-sizing: border-box;
}
ul,
nav {
list-style: none;
}
.pricing * {
margin: 0 auto;
}
section {
align-items: center;
}
.bg-gray{
background: #F2F2F2;
}
.container-fluid{
background: #fff
}
/*----------------------
pricing section
----------------------*/
/* .pricing {
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
font-family: lato;
z-index: -2
}*/
.flex-container-ctrl {
align-items: center;
width: 100%;
z-index: 9;
}
.flex-container {
display: flex;
padding: 1.9em;
max-width: 80%;
position: relative;
z-index: 1;
}
.flex-item {
flex: 1;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1.5em;
width: 90%;
}
.package {
border: 1px solid #eee;
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transition: 0.25s;
border-radius: 12px;
}
/* .package:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transform: scale(1.025);
} */
.package .header {
color: #fff;
font-size: 1.5em;
height: 124px;
}
.package .highlight {
background-color: #29b6f6;
border-radius: 12px 12px 0 0;
}
.package .heading:nth-of-type(1):before {
content: "Best Plan";
display: block;
padding: 5px 0;
background: #ffb100;
box-shadow: 0 1px 0 #c18705;
color: #fff;
border-radius: 25px;
width: 10%;
margin: -45px 70px;
position: absolute;
/* top: 1px; */
font-size: large;
transition: all 0.5s ease;
box-sizing: border-box;
letter-spacing: 0.13em;
}
.package .pricing-title {
float: left;
height: 10px;
font-size: 17px;
font-weight: bold;
}
.pricing-title .sub-pricing-title {
font-size: 10px;
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing-title img{
width: 19px;
height: auto;
}
.package .ctrl-pricing {
float: right;
height: 10px;
}
.ctrl-pricing .sub-pricing-title {
font-size: 10px;
}
.package li {
background-color: #fff;
/* border-bottom: 1px solid #eee; */
padding: 1.2em;
text-align: center;
height: 20px;
}
.package .gray {
/* background-color: #eee; */
font-size: 1.25em;
border-radius: 0 0 12px 12px;
height: inherit;
padding: 1.6em;
}
button {
background: #015496;
border: none;
border-radius: 25px;
color: #fff;
cursor: pointer;
padding: 0.51em 1.5em;
font-size: 16px;
font-weight: bold;
z-index: 99;
}
.font-clr {
color: #29b6f6;
}
.flower-right{
width: 34em;
height: 48em;
right: 0em;
bottom: 2px;
background: url(https://i.imgur.com/ScMV83t.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: -2px;
}
#rightflower{
background-position: 10px;
}
.flower-left{
width: 34em;
height: 51em;
left: 0em;
bottom: 2px;
background: url(https://i.imgur.com/ttgZVYr.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: 0em;
float: left;
}
#leftflower{
background-position: 10px;
}
@media only screen and (max-width: 800px) {
button {
padding: -0.25em;
}
.flex-container {
flex-wrap: wrap;
}
.payment-method{
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
padding-bottom: 20px
}
.flower-left,.flower-right{
display: none;
}
.max-width{
max-width: 71%;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 9em;
}
}
@media only screen and (max-width: 700px) {
.flex-container {
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
}
.package:hover {
box-shadow: none;
transform: none;
}
button {
padding: -0.25em 1.5em;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 6.5em;
}
.ctrl-button{
padding: 2px 5px 0 5px !important;
}
.max-width{
max-width: 75%;
}
}
* {
box-sizing: border-box;
}
ul,
nav {
list-style: none;
}
.pricing * {
margin: 0 auto;
}
section {
align-items: center;
}
.bg-gray{
background: #F2F2F2;
}
.container-fluid{
background: #fff
}
/*----------------------
pricing section
----------------------*/
/* .pricing {
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
font-family: lato;
z-index: -2
}*/
.flex-container-ctrl {
align-items: center;
width: 100%;
z-index: 9;
}
.flex-container {
display: flex;
padding: 1.9em;
max-width: 80%;
position: relative;
z-index: 1;
}
.flex-item {
flex: 1;
width: 0;
}
.flex-item:not(:last-child) {
margin-right: 1.5em;
width: 90%;
}
.package {
border: 1px solid #eee;
list-style-type: none;
margin: 0;
padding: 0;
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transition: 0.25s;
border-radius: 12px;
}
/* .package:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
transform: scale(1.025);
} */
.package .header {
color: #fff;
font-size: 1.5em;
height: 124px;
}
.package .highlight {
background-color: #29b6f6;
border-radius: 12px 12px 0 0;
}
.package .heading:nth-of-type(1):before {
content: "Best Plan";
display: block;
padding: 5px 0;
background: #ffb100;
box-shadow: 0 1px 0 #c18705;
color: #fff;
border-radius: 25px;
width: 10%;
margin: -45px 70px;
position: absolute;
/* top: 1px; */
font-size: large;
transition: all 0.5s ease;
box-sizing: border-box;
letter-spacing: 0.13em;
}
.package .pricing-title {
float: left;
height: 10px;
font-size: 17px;
font-weight: bold;
}
.pricing-title .sub-pricing-title {
font-size: 10px;
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing-title img{
width: 19px;
height: auto;
}
.package .ctrl-pricing {
float: right;
height: 10px;
}
.ctrl-pricing .sub-pricing-title {
font-size: 10px;
}
.package li {
background-color: #fff;
/* border-bottom: 1px solid #eee; */
padding: 1.2em;
text-align: center;
height: 20px;
}
.package .gray {
/* background-color: #eee; */
font-size: 1.25em;
border-radius: 0 0 12px 12px;
height: inherit;
padding: 1.6em;
}
button {
background: #015496;
border: none;
border-radius: 25px;
color: #fff;
cursor: pointer;
padding: 0.51em 1.5em;
font-size: 16px;
font-weight: bold;
z-index: 99;
}
.font-clr {
color: #29b6f6;
}
.flower-right{
width: 34em;
height: 48em;
right: 0em;
bottom: 2px;
background: url(https://i.imgur.com/ScMV83t.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: -2px;
}
#rightflower{
background-position: 10px;
}
.flower-left{
width: 34em;
height: 51em;
left: 0em;
bottom: 2px;
background: url(https://i.imgur.com/ttgZVYr.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
z-index: 0;
top: 0em;
float: left;
}
#leftflower{
background-position: 10px;
}
@media only screen and (max-width: 800px) {
button {
padding: -0.25em;
}
.flex-container {
flex-wrap: wrap;
}
.payment-method{
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
padding-bottom: 20px
}
.flower-left,.flower-right{
display: none;
}
.max-width{
max-width: 71%;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 9em;
}
}
@media only screen and (max-width: 700px) {
.flex-container {
flex-wrap: wrap;
}
.flex-item {
flex: 0 0 100%;
margin-bottom: 1em;
width: 100%;
}
.package:hover {
box-shadow: none;
transform: none;
}
button {
padding: -0.25em 1.5em;
}
.package .heading:nth-of-type(1):before {
width: 20%;
margin: -39px 6.5em;
}
.ctrl-button{
padding: 2px 5px 0 5px !important;
}
.max-width{
max-width: 75%;
}
}
答案 4 :(得分：0)
您已经在此处发布了很多代码，需要自己删除主页的背景色，但除此之外，还可以。
创建一个名为<section class="pricing" id="pricing">
<div class="flex-container-ctrl">
<div class="flex-container">
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title"><i class="img-fire"><img
src="../../../../assets/img/fire-icon-563.png"></i>
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title"><i class="img-fire"><img
src="../../../../assets/img/fire-icon-563.png"></i>
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
<div class="flex-item">
<ul class="package">
<li class="header highlight">
<span class="pricing-title"><i class="img-fire"><img
src="../../../../assets/img/fire-icon-563.png"></i>
<p class="sub-pricing-title "> </p></span><span class="ctrl-pricing"> <p
class="sub-pricing-title "> </p></span>
</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="font-clr"> </li>
<li class="gray">
</li>
</ul>
</div>
</div>
</div>
<div class="flower-right" id="rightflower"></div>
<div class="flower-left" id="leftflower"></div>
</section>的div并将background设置为z-index，然后对-1进行同样的操作并将pagebody设置为z-index。这应该够了吧。只需将背景div设置为具有背景图像，或将图像以1的宽度和高度放置在DIV中即可。
100%.background {
z-index: -1;
background-image: url("https://t3.ftcdn.net/jpg/01/94/75/70/240_F_194757077_Lv4ZT8XAOQRerY0vTA4grbAEwTHU9srK.jpg")
}
}
.pagebody {
z-index: 1;
}
\* Rest of CSS *\
我无法包含您的所有代码，因为它标记为重复代码。您还可以为背景创建左右DIV，各占50％。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？