Javascript 如何删除半图像卡并使其在html、css中充满

Javascript 如何删除半图像卡并使其在html、css中充满,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我正在为我的大学创建一个网站,但是这个图片卡的事情把事情搞砸了,我怎么能让图片卡的背景图片充满而不是显示在图片中。请看穿它 element.style{ } .项目\服务\卡{ 位置:相对位置; 溢出:隐藏; } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,缩写词,地址,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,s

我正在为我的大学创建一个网站,但是这个图片卡的事情把事情搞砸了,我怎么能让图片卡的背景图片充满而不是显示在图片中。请看穿它

element.style{
}
.项目\服务\卡{
位置:相对位置;
溢出:隐藏;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,缩写词,地址,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,dd,ol,ul,li,fieldset,form,label,label,table,table,table,table,caption,tbody,tfoot,thead,tr,th,th,th,the,the,the,the,of,旁白、画布、细节、嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、红宝石、部分、摘要、时间、标记、音频、视频{
保证金:0;
填充:0;
边界:0;
字体大小:100%;
字体:继承;
垂直对齐:基线;
}
*,::之后,::之前{
框大小:边框框;
}
用户代理样式表
div{
显示:块;
}
.owl-carousel.owl-drag.owl项目{
-ms触摸动作:泛y;
触摸动作:泛y;
-webkit用户选择:无;
-moz用户选择:无;
-ms用户选择:无;
用户选择:无;
}
.owl转盘,.owl转盘.owl项目{
-webkit点击突出显示颜色:透明;
位置:相对位置;
}
身体{
字体系列:“开放式Sans”,无衬线;
字体大小:14px;
线高:1.48;
字体大小:400;
颜色:#000;
}
身体{
线高:1;
}
身体{
保证金:0;
字体系列:-苹果系统,BlinkMacSystemFont,“Segoe UI”,Roboto,“Helvetica Neue”,Arial,无衬线,“苹果颜色表情符号”,“Segoe UI表情符号”,“Segoe UI符号”;
字号:1rem;
字体大小:400;
线高:1.5;
颜色:#212529;
文本对齐:左对齐;
背景色:#fff;
}
:根{
--蓝色:#007bff;
--靛蓝:#6610f2;
--紫色:#6f42c1;
--粉红色:#e83e8c;
--红色:#dc3545;
--橙色:#fd7e14;
--黄色:#ffc107;
--绿色:#28a745;
--teal:#20c997;
--青色:#17a2b8;
--白色:#fff;
--灰色:#6c757d;
--灰黑色:#343a40;
--初级:#007bff;
--二级:#6c757d;
--成功:28a745;
--资料:#17a2b8 ;;
--警告:#ffc107;
--危险:#dc3545;
--灯光#f8f9fa;
--深色:#343a40;
--断点xs:0;
--断点sm:576px;
--断点md:768px;
--断点lg:992px;
--断点xl:1200px;
--字体系列无衬线:-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、“Helvetica Neue”、Arial、无衬线、“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”;
--字体系列monospace:SFMono-Regular、Menlo、摩纳哥、Consolas、“解放Mono”、“信使新”、monospace;
}
html{
字体系列:无衬线;
线高:1.15;
-webkit文本大小调整:100%;
-ms文本大小调整:100%;
-ms溢出样式:滚动条;
-webkit点击突出显示颜色:透明;
}
用户代理样式表
html{
颜色:-内部根颜色;
}
*,::之后,::之前{
框大小:边框框;
}
*,::之后,::之前{
框大小:边框框;
}
以下代码是我的卡片html代码
西康
洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图
告别精英。在risus magna,porta sit amet
orci ultrices,方便调味品

指南:

Lorem ipsum dolor sit amet,是一位杰出的献身者。 在risus magna,门位于amet orci ultrices。 在arcu的车辆ac上安装ESED eros和sapien laoreet。Suspendisse et nulla sem。 前庭调味品risus Vita quam fringilla, 康格简历。孕妇饮用碳酸钠


您可以通过将
图像
放置为
背景图像
将此添加到css中

.image_service{
background:url(https://www.w3schools.com/bootstrap/la.jpg)center no-repeat;
background-size:cover;
height:-webkit-fill-available;
}
*,
::之后,
::之前{
框大小:边框框;
}
.项目\服务\卡{
位置:相对位置;
溢出:隐藏;
}
.owl-carousel.owl-drag.owl项目{
-ms触摸动作:泛y;
触摸动作:泛y;
-webkit用户选择:无;
-moz用户选择:无;
-ms用户选择:无;
用户选择:无;
}
.猫头鹰转盘,
.猫头鹰转盘.猫头鹰物品{
-webkit点击突出显示颜色:透明;
位置:相对位置;
}  
.图像处理服务{
背景:url(https://www.w3schools.com/bootstrap/la.jpg)中心不重复;
背景尺寸:封面;
高度:-可使用webkit填充;
}

西康
Lorem ipsum dolor sit amet,是一位杰出的献身者。在risus magna中,是一家名为orci ultrices、调味品便利店

指南:

Lorem ipsum dolor sit amet,是一位杰出的献身者。在risus magna,门位于amet orci ultrices。在arcu的车辆ac上安装ESED eros和sapien laoreet。Suspendisse et nulla sem。前庭调味品维他维他维他 康格·马蒂斯。孕妇饮用碳酸钠


尝试为图像添加100%的宽度,或将图像url设置为
。图像服务
类div,并设置背景大小以覆盖此内容。我有10张这样的卡,如何更改每个人的.image服务您可以为所有卡指定单独的类别,如所有图像持有者的
div
card1
card2
等,然后将图像添加到背景中。顺便问一下,你想用卡片制作旋转木马吗?检查上面的答案,更新。如果你觉得这有帮助,请接受我的回答