【发布时间】：2019-06-30 01:02:31
【问题描述】：
我正在为我的大学创建一个网站，但是这个图像卡的东西搞砸了，我怎样才能使卡片的背景图像充满而不是显示在图像中。请看透它
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>详情
我想去掉图片中的半边背景，让图片区域充满
【问题讨论】：
-
尝试将 100% 的宽度添加到图像或将图像 url 设置为
.image-service类 div 并设置背景大小来覆盖它，这将完全按照您的意愿工作。
标签： javascript html css bootstrap-4