如何删除一半的图像卡，并使其完整的html，css

时间：2019-06-29 04:02:55

标签： javascript html css bootstrap-4

我正在为我的大学创建一个网站，但是这张图像卡东西弄得乱七八糟，我该如何使图像卡的背景图像更完整而不是未在图像中显示。请仔细查看

element.style {
}
.item_service_card {
    position: relative;
    overflow: hidden;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.owl-carousel, .owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.48;
    font-weight: 400;
    color: #000;
}
body {
    line-height: 1;
}
body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*, ::after, ::before {
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}
the following code is my html code for the card
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1900px;"><div class="owl-item active" style="width: 350px; margin-right: 30px;"><div class="item_service_card">
					<div class="image_service">
						<img src="assets/images/sycon.jpg" alt="">
					</div>
					<div class="describe_service">
						<h4 class="name_service">
							SYCon
						</h4>
						<p>Lorem ipsum dolor sit amet, consectetur
						adipiscing elit. In risus magna, porta sit amet
						orci ultrices, condimentum facilisis. </p>
					</div>
					<div class="overlay">
						<h4 class="name_service">
							<a href="sycon.html">SYCon</a>
						</h4>
						<h6>Guide:</h6>
						<p><a href="single-team.html">Jak Rooney</a></p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						In risus magna, porta sit amet orci ultrices.
						Praesent sed eros et sapien laoreet vehicula ac at arcu. Suspendisse et nulla sem.
						Vestibulum condimentum risus vitae quam fringilla,
						vitae congue sem mattis. Nulla accumsan nisl ac massa sodales gravida.</p>
					</div>

详细信息

enter image description here

我要删除图像中的一半背景，并使其在图像区域中充满

1 个答案:

答案 0 :(得分：0)

您可以通过将image设置为background-image来完成此操作 将此添加到您的CSS 

.image_service{
background:url(https://www.w3schools.com/bootstrap/la.jpg)center no-repeat;
background-size:cover;
height:-webkit-fill-available;
}


*,
 ::after,
 ::before {
   box-sizing: border-box;
}

.item_service_card {
   position: relative;
   overflow: hidden;
}

.owl-carousel.owl-drag .owl-item {
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.owl-carousel,
.owl-carousel .owl-item {
   -webkit-tap-highlight-color: transparent;
   position: relative;
}  

.image_service {
   background: url(https://www.w3schools.com/bootstrap/la.jpg)center no-repeat;
   background-size: cover;
   height: -webkit-fill-available;
}
<div class="container">
  <div class="owl-stage-outer">
    <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1900px;">
      <div class="owl-item active" style="width: 350px; margin-right: 30px;">
        <div class="item_service_card">
          <div class="image_service">

          </div>
          <div class="describe_service">
            <h4 class="name_service">
              SYCon
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In risus magna, porta sit amet orci ultrices, condimentum facilisis. </p>
          </div>
          <div class="overlay">
            <h4 class="name_service">
              <a href="sycon.html">SYCon</a>
            </h4>
            <h6>Guide:</h6>
            <p><a href="single-team.html">Jak Rooney</a></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In risus magna, porta sit amet orci ultrices. Praesent sed eros et sapien laoreet vehicula ac at arcu. Suspendisse et nulla sem. Vestibulum condimentum risus vitae quam fringilla, vitae
              congue sem mattis. Nulla accumsan nisl ac massa sodales gravida.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  

注意：如果您要制作旋转木马，则可以使用Bootstrap本身来做，请使用codeply: Multi slider carousel精美解释过的卡片检查此here。您可以调整{{1 }}和col根据您的要求。对于transform:translateX(*%)，它将是col-sm-4；对于transform:translateX(-33.3%)，它将是col-sm-3。

相关问题
最新问题