Question

我正在为荷兰的LHBT社区建立一个网站。

我正在使用可用于多个网站的模板，并且想提供一个电子邮件订阅按钮。子框看起来像这样

Promise

当我想使用某些鼠标操作（例如使用窗体/按钮）时，它没有给出任何响应。另外，我看不到垂直杠光标，告诉我可以选择文本。但是，当我删除.cta .cta-inner { position: relative; padding: 3rem; margin: 0.5rem; background-color: rgba(255, 255, 255, 0.85); } .cta .cta-inner:before { border-radius: 0.5rem; content: ''; position: absolute; top: -0.5rem; bottom: -0.5rem; left: -0.5rem; right: -0.5rem; border: 0.25rem solid rgba(255, 255, 255, 0.85); }的第二行时，它又可以工作了。

但是当我这样做时，我的盒子周围没有可爱的边框。

这是我的HTML

.cta .cta-inner:before

如何获得具有使用表格功能的第一张图片的样式？

添加的代码段

<section class="page-section cta closeBorder">
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
          <div class="cta-inner rounded">
            <h2 class="section-heading mb-4">
              <span class="text-center section-heading-upper">Wordt lid van de nieuwsbrief</span>
              <span class="text-center section-heading-lower">Blijf op de hoogte</span>
            </h2>
            <p class="mb-0 text-center">When you walk into our shop to start your day, we are dedicated to providing you with friendly service, a welcoming atmosphere, and above all else, excellent products made with the highest quality ingredients. If you are not satisfied, please let us know and we will do whatever we can to make things right!</p>
            <b class="pull-left"><em>E-mailadres:</em></b>
            <input type="email" class="form-control" name="email">
            <input type="submit" class="btn-block subBtn" value="Abonneer!">
          </div>
        </div>
      </div>
    </div>
  </section>

/*!
 * Start Bootstrap - Business Casual v5.0.3 (https://startbootstrap.com/template-overviews/business-casual)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-casual/blob/master/LICENSE)/
 */

@font-face {
  font-family: Bahnschrift;
  src: url(BAHNSCHRIFT.TTF);
}

body {
  font-family: 'Bahnschrift' !important;
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(47, 23, 15, 0.65))), url("../img/bg.jpg"); */
  /* background: linear-gradient(rgba(47, 23, 15, 0.65)), url("../img/bg.jpg"); */
  background-color: #ec008c; /* For browsers that do not support gradients */
  background-image: linear-gradient(to top right, #ec008c, #fc6767); /* Standard syntax (must be last) */
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: 'Raleway'; */
}

p {
  line-height: 1.75;
}

.text-faded {
  color: rgba(255, 255, 255, 0.3);
}

.site-heading {
  margin-top: 5rem;
  margin-bottom: 5rem;
  text-transform: uppercase;
  line-height: 1;
  /* font-family: 'Raleway'; */
}

.site-heading .site-heading-upper {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

.site-heading .site-heading-lower {
  font-size: 5rem;
  font-weight: 100;
  line-height: 4rem;
}

.page-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.section-heading {
  text-transform: uppercase;
}

.section-heading .section-heading-upper {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.section-heading .section-heading-lower {
  display: block;
  font-size: 3rem;
  font-weight: 100;
}

.bg-faded {
  background-color: rgba(255, 255, 255, 0.85);
}

#mainNav {
  background-color: #002060;
  /* font-family: 'Raleway'; */
}

#mainNav .navbar-brand {
  color: #e6a756;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #f2f2f2;
  font-weight: 800;
}

#mainNav .navbar-nav .nav-item.active .nav-link {
  color: #fc6767;
}

@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.9rem;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, 0.4);
  }
  #mainNav .navbar-nav .nav-item.active .nav-link:hover {
    color: #e6a756;
  }
}

.btn-xl {
  font-weight: 700;
  font-size: 0.8rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.intro {
  position: relative;
}

@media (min-width: 992px) {
  .intro .intro-img {
    width: 75%;
    float: right;
  }
  .intro .intro-text {
    left: 0;
    width: 60%;
    margin-top: 3rem;
    position: absolute;
  }
  .intro .intro-text .intro-button {
    width: 100%;
    left: 0;
    position: absolute;
    bottom: -2rem;
  }
}

@media (min-width: 1200px) {
  .intro .intro-text {
    width: 45%;
  }
}

.cta {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: #002060;
}

.cta .cta-inner {
  position: relative;
  padding: 3rem;
  margin: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
}

.cta .cta-inner:before {
  border-radius: 0.5rem;
  content: '';
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.85);
}

@media (min-width: 992px) {
  .about-heading .about-heading-img {
    position: relative;
    z-index: 0;
  }
  .about-heading .about-heading-content {
    margin-top: -5rem;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 992px) {
  .product-item .product-item-title {
    position: relative;
    z-index: 1;
    margin-bottom: -3rem;
  }
  .product-item .product-item-img {
    position: relative;
    z-index: 0;
    max-width: 60vw;
  }
  .product-item .product-item-description {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    max-width: 50vw;
  }
}

.list-hours {
  font-size: 0.9rem;
}

.list-hours .list-hours-item {
  border-bottom: 1px solid rgba(230, 167, 86, 0.5);
  padding-bottom: .25rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.list-hours .list-hours-item.today {
  font-weight: bold;
  color: #e6a756;
}

@media (min-width: 992px) {
  .list-hours {
    width: 50%;
    font-size: 1.1rem;
  }
}

.address strong {
  font-size: 1.2rem;
}

.footer {
  background-color: rgba(47, 23, 15, 0.9);
}

.text-primary {
  color: #e6a756 !important;
}

.bg-primary {
  background-color: #e6a756 !important;
}

.btn {
  -webkit-box-shadow: 0px 3px 3px 0px rgba(33, 37, 41, 0.1);
  box-shadow: 0px 3px 3px 0px rgba(33, 37, 41, 0.1);
}

.btn-primary {
  background-color: #ec008c; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bo left, #ec008c, #fc6767); /* Standard syntax (must be last) */
  border: 0;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #df902a;
  border-color: #df902a;
}

.font-weight-light {
  font-weight: 100 !important;
}

.logo {
	width: 10%;
}

.pull-left {
	font-size: 13pt;
}

.subBtn {
	background-color: #ec008c;
	border: 0;
	border: 1px solid #ec008c;
	border-radius: 7px;
	margin-top: 5px;
	color: #f2f2f2;
}

Answer 1

您应将z-index:-1添加到.cta .cta-inner:before

我也将z-index:2添加到了.cta .cta-inner

@font-face {
  font-family: Bahnschrift;
  src: url(BAHNSCHRIFT.TTF);
}

body {
  font-family: 'Bahnschrift' !important;
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(47, 23, 15, 0.65))), url("../img/bg.jpg"); */
  /* background: linear-gradient(rgba(47, 23, 15, 0.65)), url("../img/bg.jpg"); */
  background-color: #ec008c; /* For browsers that do not support gradients */
  background-image: linear-gradient(to top right, #ec008c, #fc6767); /* Standard syntax (must be last) */
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: 'Raleway'; */
}

p {
  line-height: 1.75;
}

.text-faded {
  color: rgba(255, 255, 255, 0.3);
}

.site-heading {
  margin-top: 5rem;
  margin-bottom: 5rem;
  text-transform: uppercase;
  line-height: 1;
  /* font-family: 'Raleway'; */
}

.site-heading .site-heading-upper {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

.site-heading .site-heading-lower {
  font-size: 5rem;
  font-weight: 100;
  line-height: 4rem;
}

.page-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.section-heading {
  text-transform: uppercase;
}

.section-heading .section-heading-upper {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.section-heading .section-heading-lower {
  display: block;
  font-size: 3rem;
  font-weight: 100;
}

.bg-faded {
  background-color: rgba(255, 255, 255, 0.85);
}

#mainNav {
  background-color: #002060;
  /* font-family: 'Raleway'; */
}

#mainNav .navbar-brand {
  color: #e6a756;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #f2f2f2;
  font-weight: 800;
}

#mainNav .navbar-nav .nav-item.active .nav-link {
  color: #fc6767;
}

@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.9rem;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, 0.4);
  }
  #mainNav .navbar-nav .nav-item.active .nav-link:hover {
    color: #e6a756;
  }
}

.btn-xl {
  font-weight: 700;
  font-size: 0.8rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.intro {
  position: relative;
}

@media (min-width: 992px) {
  .intro .intro-img {
    width: 75%;
    float: right;
  }
  .intro .intro-text {
    left: 0;
    width: 60%;
    margin-top: 3rem;
    position: absolute;
  }
  .intro .intro-text .intro-button {
    width: 100%;
    left: 0;
    position: absolute;
    bottom: -2rem;
  }
}

@media (min-width: 1200px) {
  .intro .intro-text {
    width: 45%;
  }
}

.cta {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: #002060;
}

.cta .cta-inner {
  position: relative;
  padding: 3rem;
  margin: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
  z-index:2;
}

.cta .cta-inner:before {
  border-radius: 0.5rem;
  content: '';
  z-index:-1;
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.85);
}

@media (min-width: 992px) {
  .about-heading .about-heading-img {
    position: relative;
    z-index: 0;
  }
  .about-heading .about-heading-content {
    margin-top: -5rem;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 992px) {
  .product-item .product-item-title {
    position: relative;
    z-index: 1;
    margin-bottom: -3rem;
  }
  .product-item .product-item-img {
    position: relative;
    z-index: 0;
    max-width: 60vw;
  }
  .product-item .product-item-description {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    max-width: 50vw;
  }
}

.list-hours {
  font-size: 0.9rem;
}

.list-hours .list-hours-item {
  border-bottom: 1px solid rgba(230, 167, 86, 0.5);
  padding-bottom: .25rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.list-hours .list-hours-item.today {
  font-weight: bold;
  color: #e6a756;
}

@media (min-width: 992px) {
  .list-hours {
    width: 50%;
    font-size: 1.1rem;
  }
}

.address strong {
  font-size: 1.2rem;
}

.footer {
  background-color: rgba(47, 23, 15, 0.9);
}

.text-primary {
  color: #e6a756 !important;
}

.bg-primary {
  background-color: #e6a756 !important;
}

.btn {
  -webkit-box-shadow: 0px 3px 3px 0px rgba(33, 37, 41, 0.1);
  box-shadow: 0px 3px 3px 0px rgba(33, 37, 41, 0.1);
}

.btn-primary {
  background-color: #ec008c; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bo left, #ec008c, #fc6767); /* Standard syntax (must be last) */
  border: 0;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #df902a;
  border-color: #df902a;
}

.font-weight-light {
  font-weight: 100 !important;
}

.logo {
	width: 10%;
}

.pull-left {
	font-size: 13pt;
}

.subBtn {
	background-color: #ec008c;
	border: 0;
	border: 1px solid #ec008c;
	border-radius: 7px;
	margin-top: 5px;
	color: #f2f2f2;
}

<section class="page-section cta closeBorder">
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
          <div class="cta-inner rounded">
            <h2 class="section-heading mb-4">
              <span class="text-center section-heading-upper">Wordt lid van de nieuwsbrief</span>
              <span class="text-center section-heading-lower">Blijf op de hoogte</span>
            </h2>
            <p class="mb-0 text-center">When you walk into our shop to start your day, we are dedicated to providing you with friendly service, a welcoming atmosphere, and above all else, excellent products made with the highest quality ingredients. If you are not satisfied, please let us know and we will do whatever we can to make things right!</p>
            <b class="pull-left"><em>E-mailadres:</em></b>
            <input type="email" class="form-control" name="email">
            <input type="submit" class="btn-block subBtn" value="Abonneer!">
          </div>
        </div>
      </div>
    </div>
  </section>

CSS类中没有任何鼠标操作

1 个答案: