中创建响应式棋盘背景

中创建响应式棋盘背景

本文介绍了如何在 CSS 中创建响应式棋盘背景?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要一个响应式棋盘背景,它应该看起来像颜色选择器中的背景:

我尝试了什么:

.chess {背景图:线性渐变(90度,#999 30px,白色30px),线性渐变(90 度,白色 30 像素,#999 30 像素),线性渐变(90度,#999 30px,白色30px),线性渐变(90 度,白色 30 像素,#999 30 像素),线性渐变(90度,#999 30px,白色30px),线性渐变(90 度,白色 30 像素,#999 30 像素),线性渐变(90度,#999 30px,白色30px);背景位置:0 0、0 30px、0 60px、0 90px、0 120px;背景重复:重复-x;背景尺寸:60px 30px;高度:150px;边距:15px 自动;宽度:30%;}.fas {文本对齐:居中;字体大小:10em}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/><链接 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 完整性="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="匿名">

<div class="btn btn-大纲-二级棋"><i class="fas fa-car"></i></div><div>

问题:

  • 我的结果不是响应式的.(我有固定的像素大小)
  • 如果我有较大的背景或较小的元素,我将需要大量代码.
  • 我没有实现将模式居中或使用

    解决方案

    这里有一个想法,依赖于

    如果你想拥有相同的大小并且没有截断,你也可以考虑roundbackground-repeat:

    .chess {背景:重复圆锥梯度(#fff 0度90度,灰色 0° 180°)0 0/40px 40px 圆形;边距:15px;填充:10px;}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/><div class="chess fas fa-7x fa-car"></div><div class="chess fas fa-5x fa-car"></div><div class="chess fas fa-10x fa-user"></div><div class="chess fas fa-3x fa-phone"></div>


    为了获得更好的支持,您可以将渐变替换为 SVG 以获得相同的结果:

    .chess {背景:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey"/><rect x="5" y="5" width="5" height="5" fill="灰色"/><rect x="5" y="0" width="5" height="5" fill="white"/><rect x="0" y="5" 宽度="5" 高度="5" 填充="白色"/></svg>')0 0/25% 25%;边距:15px;填充:10px;}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/><div class="chess fas fa-7x fa-car"></div><div class="chess fas fa-5x fa-car"></div><div class="chess fas fa-10x fa-user"></div><div class="chess fas fa-3x fa-phone"></div>

    而且尺寸固定:

    .chess {背景:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey"/><rect x="5" y="5" width="5" height="5" fill="灰色"/><rect x="5" y="0" width="5" height="5" fill="white"/><rect x="0" y="5" 宽度="5" 高度="5" 填充="白色"/></svg>')0 0/40px 40px 圆形;边距:15px;填充:10px;}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/><div class="chess fas fa-7x fa-car"></div><div class="chess fas fa-5x fa-car"></div><div class="chess fas fa-10x fa-user"></div><div class="chess fas fa-3x fa-phone"></div>

    I want to have a resposive checkerboard background that should look like the background in a color selector:

    What I tried:

    .chess {
      background-image:
        linear-gradient(90deg, #999 30px, white 30px),
        linear-gradient(90deg, white 30px, #999 30px),
        linear-gradient(90deg, #999 30px, white 30px),
        linear-gradient(90deg, white 30px, #999 30px),
        linear-gradient(90deg, #999 30px, white 30px),
        linear-gradient(90deg, white 30px, #999 30px),
        linear-gradient(90deg, #999 30px, white 30px);
      background-position: 0 0, 0 30px, 0 60px, 0 90px, 0 120px;
      background-repeat: repeat-x;
      background-size: 60px 30px;
      height: 150px;
      margin: 15px auto;
      width: 30%;
    }
    
    
    .fas {
      text-align: center;
      font-size: 10em
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <div>
      <div class="btn btn-outline-secondary chess">
      <i class="fas fa-car"></i>
      </div>
    <div>

    Problems:

    • My result is not resposive. (I have fixed pixel sizes)
    • I would need a lot of code if I have a larger background or smaller elements.
    • I did not achieve to center the pattern or use background-repeat: round

    If it is possible I don't want any cut off elements in the checkerboard background.

    Not like this (cut off on the right and bottom):

    解决方案

    Here is an idea that rely on conic-gradient:

    .chess {
      background:
        repeating-conic-gradient(
            #fff 0deg  90deg,
            grey 0 180deg)
        0 0/25% 25%;
      margin: 15px;
      padding:10px;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
    
    <div class="chess fas fa-7x fa-car"></div>
    <div class="chess fas fa-5x fa-car"></div>
    <div class="chess fas fa-10x fa-user"></div>
    <div class="chess fas fa-3x fa-phone"></div>

    You can also consider round of background-repeat if you want to have the same size and no cut off:

    .chess {
      background:
        repeating-conic-gradient(
            #fff 0deg 90deg,
            grey 0deg 180deg)
        0 0/40px 40px round;
      margin: 15px;
      padding:10px;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
    
    <div class="chess fas fa-7x fa-car"></div>
    <div class="chess fas fa-5x fa-car"></div>
    <div class="chess fas fa-10x fa-user"></div>
    <div class="chess fas fa-3x fa-phone"></div>


    For better support, you can replace the gradient with an SVG to have the same result:

    .chess {
      background:
        url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none"  viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>')
        0 0/25% 25%;
      margin: 15px;
      padding:10px;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
    
    <div class="chess fas fa-7x fa-car"></div>
    <div class="chess fas fa-5x fa-car"></div>
    <div class="chess fas fa-10x fa-user"></div>
    <div class="chess fas fa-3x fa-phone"></div>

    And with a fixed size:

    .chess {
      background:
        url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none"  viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>')
        0 0/40px 40px round;
      margin: 15px;
      padding:10px;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
    
    <div class="chess fas fa-7x fa-car"></div>
    <div class="chess fas fa-5x fa-car"></div>
    <div class="chess fas fa-10x fa-user"></div>
    <div class="chess fas fa-3x fa-phone"></div>

    这篇关于如何在 CSS 中创建响应式棋盘背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 04:12