[英]How to add small square shaped grid to DIV element using the HTML/CSS
I have a div
element within my application.我的应用程序中有一个
div
元素。 I want to add background to it.我想给它添加背景。 The background should consist of small squares.
背景应由小方块组成。 As I would like to draw some shapes on top of it.
因为我想在它上面画一些形状。 I am unable to follow what exactly needs to be done in order to get these grids in the background.
我无法遵循确切需要做什么才能在后台获取这些网格。 Can someone please help?
有人可以帮忙吗?
I want the whole div
portion within the HTML page
to look something like this:我希望
HTML page
的整个div
部分看起来像这样:
It should Something like this:它应该是这样的:
<template>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<v-stage ref="stage" class="stage">
<v-layer ref="layer"> </v-layer>
</v-stage>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style scoped>
.stage {
background-color: red;
}
</style>
A background can do it:背景可以做到:
html { min-height: 100%; background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),#366 270deg, #0000 0), conic-gradient(at calc(100% - 1px) calc(100% - 1px),#a9a9a9 270deg, #0000 0); background-size: 100px 100px, 20px 20px; /* adjust the size like you want */ }
I was implementing this to my KonvaJS Stage
and the following is the complete code sample in incase it it's required for someone in the future:我正在我的
KonvaJS Stage
中实现它,以下是完整的代码示例, KonvaJS Stage
将来有人需要它:
<style scoped> .root { --bg-color: #fff; --line-color-1: #D5D8DC; --line-color-2: #a9a9a9; } .body { height: 100vh; margin: 0; } .stage { height: 100%; background-color: var(--bg-color); background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),var(--line-color-1) 270deg, #0000 0), conic-gradient(at calc(100% - 1px) calc(100% - 1px),var(--line-color-2) 270deg, #0000 0); background-size: 100px 100px, 20px 20px; } </style>
<div class="root" style="width:100%; height:100%"> <div class="body"> <div class="stage"></div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.