不使用canvs也能創建出點狀背景

div{

? ? ? ? ? ? height: 100%;

? ? ? ? ? ? touch-action: none;

? ? ? ? ? ? background: radial-gradient(circle, #e6e6e6 1px, transparent 1px);

? ? ? ? ? ? /* 創建一個點狀背景 */

? ? ? ? ? ? background-size: 15px 15px; /* 控制點的大小和間距 */

? ? ? ? ? ? padding: 20px; /* 添加內邊距使內容不靠邊 */

? ? ? ? ? ? position: relative; /* 讓內部內容相對定位以在背景上顯示 */

? ? ?}

?結果:(非常nice)

如果還想要背景顏色可以改為:

div{

? ? ? ? ? ?height: 100%;

? ? ? ? ? ? touch-action: none;

? ? ? ? ? ? background: radial-gradient(circle, #e6e6e6 1px, transparent 1px) ?#f5f9fb;

? ? ? ? ? ? /* 創建一個點狀背景 */

? ? ? ? ? ? background-size: 15px 15px; /* 控制點的大小和間距 */

? ? ? ? ? ? padding: 20px; /* 添加內邊距使內容不靠邊 */

? ? ? ? ? ? position: relative; /* 讓內部內容相對定位以在背景上顯示 */

? ? }

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/36929.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/36929.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/36929.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

樹形DP——AcWing 323. 戰略游戲

樹形DP 定義 樹形動態規劃(Tree Dynamic Programming,簡稱樹形DP)是一種在樹形結構上應用動態規劃算法的技術。它利用樹的遞歸結構,通過定義狀態和狀態轉移方程,來求解與樹相關的最優化問題,如樹上的最長…

10秒教會你mysql的連接

連接MySQL數據庫通常可以通過多種方法實現,以下是幾種常見的方法,我將按照您的要求以清晰、分點的方式歸納說明: 1. 使用MySQL命令行客戶端 打開終端或命令提示符:首先,打開您的計算機上的終端或命令提示符窗口。輸入…

CSS中的display屬性:布局控制的關鍵

CSS的display屬性是控制元素在頁面上如何顯示的核心屬性之一。它決定了元素的顯示類型,以及它在頁面布局中的行為。本文將詳細介紹display屬性的不同值及其使用場景,幫助你更好地掌握布局控制。 display屬性的基本值 block 特點:塊級元素&…

LeetCode每日一題 2734.子串操作后的字典序最小字符串|標志位遍歷字符數組

問題描述 📋 子串操作后的字典序最小字符串 給定一個僅包含小寫字母的字符串,你可以執行如下操作任意次: 選擇某個子串,將其中的每個字符都替換成其前一個字母(比如 ‘b’ 變成 ‘a’,‘c’ 變成 ‘b’&…

未來數據中心智能運維的趨勢

隨著信息技術的飛速發展,數據中心作為支撐企業信息化建設的核心樞紐,其運維管理的重要性日益凸顯。傳統的運維模式已難以滿足現代數據中心高效、安全、靈活的需求,而智能運維正成為行業發展的新趨勢。本文將結合運維行業的資料和團隊經驗&…

【JavaScript 小工具】——如何判斷當前頁面是否在微信瀏覽器中打開

要判斷用戶是否通過微信瀏覽器打開網頁,你可以檢查用戶代理(User Agent)字符串中是否包含微信瀏覽器的特定標識。微信瀏覽器通常會在User Agent中包含"MicroMessenger"這個關鍵詞。 以下是一段JavaScript代碼示例,用于…

不使用cmake,如何在vs2019對cpp項目進行文件夾分類?

不使用cmake,如何在vs2019對cpp項目進行文件夾分類? 1.不使用cmake的根目錄指的是哪里?2.什么時候進行項目管理?3.應該分成什么樣的文件夾?4.如何分類? 1.不使用cmake的根目錄指的是哪里? 查看項…

最新AI智能聊天對話問答系統源碼(圖文搭建部署教程)+AI繪畫,文生圖,TTS語音識別輸入,文檔分析

一、人工智能語言模型和AI繪畫在多個領域廣泛應用 人工智能語言模型和AI繪畫在多個領域都有廣泛的應用。以下是一些它們的主要用處: 人工智能語言模型 內容生成 寫作輔助:幫助撰寫文章、博客、報告、劇本等。 代碼生成:自動生成或補全代碼&…

sudo: /etc/init.d/ssh: command not found

在 WSL 中嘗試啟動 SSH 服務時遇到 sudo: /etc/init.d/ssh: command not found 錯誤 安裝 OpenSSH 服務器 更新軟件包列表 sudo apt update安裝 OpenSSH 服務器 sudo apt install openssh-server啟動 SSH 服務 在 WSL 2 上,服務管理與傳統 Linux 系統有所不同。你可以手動啟動…

C++之STL(十)

1、適配器 2、函數適配器 #include <iostream> using namespace std;#include <algorithm> #include <vector> #include <functional>bool isOdd(int n) {return n % 2 1; } int main() {int a[] {1, 2, 3, 4, 5};vector <int> v(a, a 5);cou…

ONLYOFFICE 8.1版本桌面編輯器測評:重塑辦公效率的巔峰之作

在數字化辦公日益普及的今天&#xff0c;一款高效、便捷且功能強大的桌面編輯器成為了職場人士不可或缺的工具。ONLYOFFICE 8.1版本桌面編輯器憑借其卓越的性能和豐富的功能&#xff0c;成功吸引了眾多用戶的目光。今天&#xff0c;我們將對ONLYOFFICE 8.1版本桌面編輯器進行全…

使用el-amap-info-window遇到的問題

使用的這個庫https://github.com/yangyanggu/vue-amap 想要滾動amapInfoWindow里的內容&#xff0c;但不觸發地圖縮放 默認滾動amapInfoWindow里的內容&#xff0c;會觸發地圖縮放。看了C站一個大佬的文章解決了。 amapInfoWindow會自動滾動到頂部 我的amapInfoWindow里面用了…

【智能制造-4】機器人控制器

機器人控制器中分哪幾個模塊&#xff1f; 機器人控制器通常由以下幾個主要模塊組成: 運動控制模塊: 負責機器人各軸電機的位置、速度、加速度等控制 實現機器人末端執行器的精確定位和運動控制傳感器接口模塊: 負責機器人各種傳感器信號的采集和處理 為運動控制、環境感知等提…

Python-正則表達式

目錄 一、打開正則表達式 二、正則表達式的使用 1、限定符 &#xff08;1&#xff09;x*&#xff1a;*表示它前面的字符y 可以有0個或多個&#xff1b; &#xff08;2&#xff09;x&#xff1a;表示它前面的字符可以出現一次以上&#xff1b;&#xff08;只可以匹配多次&…

電鍍用開關電源技術詳解

1 引言 在電鍍行業里&#xff0c;一般要求工作電源的輸出電壓較低&#xff0c;而電流很大。電源的功率要求也比較高&#xff0c;一般都是幾千瓦到幾十千瓦。目前&#xff0c;如此大功率的電鍍電源一般都采用晶閘管相控整流方式。其缺點是體積大、效率低、噪音高、功率因數低、…

[CocosCreator]CocosCreator網絡通信:https + websocket + protobuf

環境 cocos creator版本&#xff1a;3.8.0 開發語言&#xff1a;ts 操作系統&#xff1a;windows http部分 直接使用 XMLHttpRequest 創建http請求 // _getHttpUrl 方法自己寫字符串拼接public httpPostJsonRequest(uri: string, headData: any, data: any, cb: Function…

2024年6月大眾點評深圳餐飲店鋪POI分析18萬家

2024年6月大眾點評深圳餐飲店鋪POI共有178720家 店鋪POI點位示例&#xff1a; 店鋪id G9TSD2JvdLtA7fdm 店鋪名稱 江味龍蝦館(南山店) 十分制服務評分 8.8 十分制環境評分 8.8 十分制劃算評分 8.6 人均價格 128 評價數量 12840 店鋪地址 南山大道與桂廟路交叉口西北角…

微信小程序 點擊左上角返回彈窗提示

業務需求&#xff1a;當頁面表單沒有提交直接返回時&#xff0c;要提示用戶是否保存當前信息&#xff0c;如果已經提交就不提示了。 由于微信小程序是無法監聽右上角按鈕返回事件。 所以就換個思路 小程序提供了如下兩個Api wx.enableAlertBeforeUnload(Object object)&…

Python入門-基礎知識-編程規范

1.縮進 在編程語言中&#xff0c;代碼之間往往存在著一定的邏輯關系和層次關系。C語言和Java語言等 用“{}”分隔代碼塊&#xff0c;而Python用的是縮進和冒號。Python代碼的縮進可以使用空格鍵或 Tab鍵來實現&#xff0c;通常情況下以4個空格或1個制表符作為1個縮進量。Pytho…

TCP協議中的三次握手和四次揮手機制

TCP協議中的三次握手和四次揮手機制 TCP&#xff08;Transmission Control Protocol&#xff0c;傳輸控制協議&#xff09;是一種面向連接的、可靠的、基于字節流的通信協議&#xff0c;它的三次握手和四次揮手機制是建立和斷開連接的關鍵步驟。 三次握手&#xff1a; 第一次…