当前位置： 首页 > news >正文

CSS 用于图片的样式属性

news 来源：原创 2025/8/8 5:13:24

CSS 设置图像样式
CSS中用于图片的样式属性主要包括以下几个方面：

‌边框和背景‌：

‌border‌：可以设置图片的边框样式、宽度和颜色。例如，img { border: 1px solid #ddd; } 会给图片添加1像素的实线边框，颜色为灰色。

‌border-radius‌：可以设置图片的圆角效果。例如，img { border-radius: 8px; } 会给图片添加8像素的圆角。

‌background-color‌：可以设置图片的背景颜色。例如，div.polaroid { background-color: white; } 会将图片的背景设置为白色。

 

尺寸和位置‌：

‌width‌ 和 ‌height‌：可以直接设置图片的宽度和高度。例如，img { width: 100px; height: 50px; } 会将图片的宽度设置为100像素，高度设置为50像素。

‌max-width‌ 和 ‌max-height‌：可以设置图片的最大宽度和高度。例如，img { max-width: 100%; height: auto; } 会使图片的最大宽度为100%，高度自动调整以保持图片比例。

‌background-position‌：可以设置背景图片的位置。例如，div { background-position: center; } 会将背景图片居中显示。

 

响应式设计‌：

‌max-width‌ 和 ‌height: auto‌：可以使图片在不同屏幕尺寸下自适应调整大小。例如，img { max-width: 100%; height: auto; } 会使图片的最大宽度为100%，高度自动调整以保持图片比例。
‌过渡效果‌：

‌transition‌：可以添加过渡效果，使图片在变化时更加平滑。例如，a:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } 会在鼠标悬停时给链接添加阴影效果。
‌其他属性‌：

‌border-radius‌：可以设置图片的圆角效果，例如 img { border-radius: 50%; } 会将图片设置为椭圆形。

‌background-size‌：可以设置背景图片的大小，例如 div { background-size: cover; } 会使背景图片覆盖整个元素区域。

通过这些属性，你可以灵活地控制网页中的图片样式，实现各种视觉效果和布局需求。

相关文章：

CSS 用于图片的样式属性

CSS 设置图像样式 CSS中用于图片的样式属性主要包括以下几个方面： ‌边框和背景‌： ‌border‌：可以设置图片的边框样式、宽度和颜色。例如，img { border: 1px solid #ddd; } 会给图片添加1像素的实线边框，颜色为灰色…...

编程日记 2025/8/8 5:13:24

【工具分享】vscode+deepseek的接入与使用

目录 第一章 前言 第二章 获取Deepseek APIKEY 2.1 登录与充值 2.2 创建API key 第三章 vscode接入deepseek并使用 3.1 vscode接入deepseek 3.2 vscode使用deepseek 第一章 前言 deepseek刚出来时有一段时间余额无法充值，导致小编没法给大家发完整的流程&…...

编程日记 2025/8/8 5:08:45

《Java核心三问：字符串、equals()、hashCode()的隐藏雷区与完美避坑手册》

目录 一.String、StringBuffer、StringBuilder的区别？1. 核心区别总结2. 具体实例演示示例1：不可变性 vs 可变性示例2：线程安全验证 2. 线程安全的关键：synchronized3. 对比StringBuilder的非线程安全4. 可视化执行流程5. 进一步验…...

编程日记 2025/8/8 5:02:32

【Java】TCP网络编程：从可靠传输到Socket实战

活动发起人小虚竹 想对你说： 这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧&#xff01…...

编程日记 2025/8/8 5:01:20

背包问题——多重背包（C语言）

代码如下&#xff1a; #include<stdio.h>int knapsack(int weight[], int value[], int count[], int n, int capacity) {int* dp (int*)malloc(sizeof(int) * (capacity 1));for (int i 0; i < capacity; i){dp[i] 0;}for (int i 0; i < n; i)//核心代码{fo…...

编程日记 2025/8/8 5:04:21

微服务》》Kubernetes (K8S) 集群配置网络》》Calico

嘻嘻嘻 以Calico 为例子 Calico官网 官网上有安装Calico插件的步骤 步骤 要在主节点 主节点 主节点 执行 kubectl create -f https://raw.githubusercontent.com/projectcalico/calico/v3.29.2/manifests/tigera-operator.yaml kubectl get pod --all-namespaces kubec…...

编程日记 2025/8/7 14:03:50

寄存器（内部访问）

内存中字的储存 我们之前提到过&#xff0c;字由两个字节组成&#xff0c;当我们用16位寄存器来储存时&#xff0c;把字分别储存在连续的两个内存单元中&#xff0c;高位字节放在高地址单元中&#xff0c;低位字节则放在低位地址单元中。 例如上图&#xff0c;0、1两个单元存放…...

编程日记 2025/8/8 4:58:31

Vue2 watch侦听器（监听器）

watch侦听器&#xff08;监听器&#xff09;功能是监听数据变化&#xff0c;执行一些业务逻辑 或 异步操作。 核心选项 ‌handler‌ 监听函数&#xff0c;接收 (newVal, oldVal) 作为参数。‌deep: true 深度监听对象/数组内部变化。‌immediate: true‌ 在组件创建时…...

编程日记 2025/8/5 4:11:40

【PCB工艺】基础：电子元器件

电子原理图&#xff08;Schematic Diagram&#xff09;是电路设计的基础&#xff0c;理解电子元器件和集成电路&#xff08;IC&#xff09;的作用&#xff0c;是画好原理图的关键。 本专栏将系统讲解 电子元器件分类、常见 IC、电路设计技巧&#xff0c;帮助你快速掌握电子电路…...

编程日记 2025/8/8 5:04:20

linux性能监控的分布式集群 prometheus + grafana 监控体系搭建

prometheusgrafana分布式集群资源监控体系搭建 前言一、安装 prometheus二、在要监控的服务器上安装监听器三、prometheus服务器配置四、grafana配置大屏五、创建Linux监控看板五、监控windows服务器注意事项 前言 Prometheus 是一个开源的 ​分布式监控系统 和 ​时间序列数据…...

编程日记 2025/8/3 1:37:16

Ubuntu AX200 iwlwifi-cc-46.3cfab8da.0.tgz无法下载的解决办法

文章目录 前言一、检查网卡是否被识别二、确认内核模块是否可用1.AX200 wifi 要求内核5.12.检查 iwlwifi.ko 是否存在&#xff1a;3.如果未找到&#xff0c;可能是内核模块未正确生成。尝试安装 linux-modules-extra&#xff1a;4.再次检查 iwlwifi.ko 是否存在&#xff1a;5.确…...

编程日记 2025/8/8 5:06:03

LinkedList与链表

ArrayList的缺陷 在上一篇博客中&#xff0c;小编已经较为详细得给大家介绍了ArrayList这个结构了。但是ArrayList存在一些缺陷&#xff1a;由于其底层是一段连续空间&#xff0c;当在ArrayList任意位置插入或者删除元素时&#xff0c;就需要将后序元素整体往前或者往后搬移&am…...

编程日记 2025/8/8 5:10:09

CCF 编程能力认证 C++ 四级宝典

CCF编程能力等级认证&#xff08;以下简称GESP&#xff09;2025年四次认证时间分别为&#xff1a;3月22日、6月28日、9月27日、12月20日&#xff0c;认证方式为线下机考&#xff0c;认证语言包括&#xff1a;C、Python和Scratch三种语言&#xff0c;其中Scratch认证为一到四级&…...

编程日记 2025/8/7 14:59:05

信创系统极速文件查找：locate 命令详解

原文链接&#xff1a;信创系统极速文件查找&#xff1a;locate 命令详解 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇信创终端操作系统上 locate 命令详解的文章。在 Linux 及信创终端操作系统&#xff08;如 统信 UOS、麒麟 KOS&#xff09;中&#xff0c;查找…...

编程日记 2025/8/8 5:02:31

数据集获取

sklearn数据集 sklearn有四部分数据。其中sklearn的数据集有两部分真实的数据，一部分嵌入到了sklearn库中，即安装好sklearn后就自带了一部分数据，这些数据的规模比较小称为small toy datasets ，还有一部分数据是需要在网上下载的，sklearn提供了下载的api接口，这些数据规…...

编程日记 2025/8/8 5:08:27

三格电子PLC数据采集网关-工业互联的智能枢纽

在工业自动化领域&#xff0c;设备间的数据互通与协议兼容是核心挑战之一。三格电子推出的PLC据采集网关SG-PLC-Private&#xff0c;凭借其多协议兼容、高稳定性和灵活配置能力&#xff0c;成为工业物联网&#xff08;IIoT&#xff09;中实现设备互联的关键设备。本文将从产品功…...

编程日记 2025/8/6 15:56:12

【sgFloatDialog】自定义组件：浮动弹窗，支持修改尺寸、拖拽位置、最大化、还原、最小化、复位

sgFloatDialog <template><div :class"$options.name" v-if"visible" :size"size" :style"style"><!-- 托盘头部 --><div class"header" ref"header" dblclick.stop.prevent"dblclic…...

编程日记 2025/8/8 5:11:53

conda 常用命令

常用 Conda 命令整理环境管理 conda create --name 环境名 &#xff1a;创建新环境 conda activate 环境名 &#xff1a;激活环境 conda deactivate&#xff1a;退出环境 conda env list&#xff1a;列出所有环境 conda remove --name 环境名 --all &#xff1a;删除环…...

编程日记 2025/8/8 5:03:54

神聖的綫性代數速成例題10. N維矢量綫性運算、矢量由矢量組綫性表示、N個N維矢量相關性質

N 維矢量綫性運算&#xff1a; 設&#xff0c;是維矢量&#xff0c;是數。加法&#xff1a;。數乘&#xff1a;。 矢量由矢量組綫性表示&#xff1a; 設是n維矢量&#xff0c;若存在一組數&#xff0c;使得&#xff0c;則稱矢量可由矢量組綫性表示。 N 個 N 維矢量相關性質&…...

编程日记 2025/8/8 5:03:53

力扣977. 有序数组的平方（双指针技巧）

Problem: 977. 有序数组的平方 文章目录 题目描述思路Code 题目描述 思路 由于数组是非递减且包含正、负数&#xff0c;则假如我们将数组中的每一个元素取平方并且将其从原始的某一个位置分开成两个数组来看待&#xff08;一个数组从前往后看&#xff0c;一个数组从后往前看&am…...

编程日记 2025/8/8 5:11:05

单片机flash存储也做磨损均衡

最近在做一个项目&#xff0c;需要保存设置数据&#xff0c;掉电不丢失。那么首先想到的是加个24c02&#xff0c;是一个eeprom&#xff0c;但是客户板太小&#xff0c;没有办法进行扩展。后面就找了一个带ee的OTP单片机&#xff0c;发现擦写次数有限&#xff0c;只有1000次&…...

编程日记 2025/8/8 5:01:20

第7章 类与面向对象

6-1 二维平面上的点操作&#xff08;Python3&#xff09; 题目描述 设计一个表示二维平面上点的类 Point。该类应该包含以下功能&#xff1a; 两个私有属性 _x 和 _y&#xff0c;分别表示点的横坐标和纵坐标。 一个构造函数 __init__&#xff0c;用于初始化点的坐标。 一个…...

编程日记 2025/8/3 1:37:15

【算法】力扣 713题：乘积小于 K 的子数组之深入思考

文章目录 前言题目&#xff1a;乘积小于 K 的子数组参考思路方法一&#xff1a;滑动窗口方法二&#xff1a;二分查找 参考题解方法一&#xff1a;滑动窗口解法方法二&#xff1a;二分查找解法 深入思考浮点精度&#xff1f;right - left 1&#xff1f;二分法&#xff1f;哈希优…...

编程日记 2025/8/8 5:11:04

Milvus vs. ElasticSearch：向量库检索性能测试

目录 1. 构建检索库2. 测试条件3. 测试结果4. 性能分析5. 结论 1. 构建检索库 构建通用场景库总计约2万张。构建车辆数据库总计约12万张。构建公共数据库&#xff0c;包括Flickr30k、COCO、nlvr2、vqa等数据集约43万张。 2. 测试条件 环境说明&#xff1a;分别单机部署Milvu…...

编程日记 2025/8/6 8:10:32

高级数据结构应用：并查集、跳表、布隆过滤器与缓存结构

高级数据结构应用：并查集、跳表、布隆过滤器与缓存结构 在解决复杂问题时，选择合适的数据结构往往是成功的关键。本文将深入探讨四种强大而实用的高级数据结构：并查集、跳表、布隆过滤器和高效缓存结构（LRU和LFU），包括它们的原理、实现、复杂度分析和实际应用场景。 1.…...

编程日记 2025/8/8 5:03:54

CVPR2025 | 蚂蚁浙大提出MP-GUI算法：全方位增强MLLM的GUI理解能力

近日&#xff0c;计算机视觉和模式识别领域国际顶会CVPR 2025公布了论文录用结果&#xff0c;蚂蚁集团与浙江大学EAGLE实验室合作的论文 “MP-GUI: Modality Perception with MLLMs for GUI Understanding” 被成功录用。 IEEE国际计算机视觉与模式识别会议&#xff08;CVPR&a…...

编程日记 2025/8/2 16:44:06

过河卒cpp动态规划

题目如下 思路 利用二维数组存储棋盘的各个点的位置&#xff0c;首先初始化所有位置为0&#xff0c;然后记马的位置为1&#xff0c;将m&#xff0c;n同时加2&#xff0c;避免马的位置溢出&#xff0c;然后对二维数组进行递推算出dp[n][m] 代码及解析如下 谢谢观看&#xff01;…...

编程日记 2025/8/8 5:10:09

春天咋会像冬天一样

2025年3月20日&#xff0c;阴&#xff0c;天寒 遇见的事&#xff1a;21&#xff5e;24号去曲靖招生&#xff0c;打电话给我说换一下&#xff0c;换了后又没有车了&#xff0c;这么坑。 感受到的情绪&#xff1a;你知道么&#xff0c;换的前提是有车。开车不给报销&#xff0c;…...

编程日记 2025/8/8 5:08:46

DooTask在Linux的离线部署教程

DooTask在Linux的离线部署教程 下载安装包 从网盘中将安装包下载到本地&#xff0c;下载地址 通过网盘分享的文件&#xff1a;DooTask项目管理工具 链接: https://pan.baidu.com/s/1hGmLXonT4c8hLiDP1QBr8w?pwdgdp6 提取码: gdp6 通过网盘分享的文件&#xff1a;DooTask项目…...

编程日记 2025/8/8 5:11:54

分享下web3j 常见用法

转账 fun sendEthTransaction(privateKey: String,toAddress: String,amount: BigDecimal) {//chainIdval chainId:Long 1//url 可以从https://chainlist.org/里面获取可用节点//eth转账&#xff0c;bnb同理&#xff0c;但需发送到bnb对应节点val url "https://xxx"…...

编程日记 2025/8/8 5:06:02

跨域问题确认及处理

背景如下&#xff1a; 近期在做的项目中&#xff0c;有个奇怪的需求&#xff0c;需要在JSP项目中嵌套一个VUE项目&#xff0c;原因是&#xff1a;JSP项目是在运且不大方便重构的一个项目&#xff0c;新需求又想为了未来着想做一套单独的项目&#xff0c;无奈只能嵌套。 当项目开…...

编程日记 2025/8/8 5:06:23

PyCharm如何添加已有的conda环境

1、点击文件中的设置 2、在右侧选中项目下的Python解释器 3、在右侧解释器一栏找到添加解释器选项 4、选择本地解释器 5、填写信息 环境&#xff1a;选择现有 类型&#xff1a;conda conda路径&#xff1a;...\Anaconda\Scripts\conda.exe 环境&#xff08;python路径&…...

编程日记 2025/8/8 5:01:18

揭开最大子段和问题的神秘面纱：从暴力法到极致优化的算法之旅

最大子段和问题&#xff1a;从暴力法到优化的算法解析 题目链接 题目描述 给出一个长度为 nn 的序列 aa&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 n。第二行有 n 个整数&#xff0c;第 i 个整数表示序列的…...

编程日记 2025/7/29 11:42:05

MySQL原理：逻辑架构

目的&#xff1a;了解 SQL执行流程 以及 MySQL 内部架构&#xff0c;每个零件具体负责做什么 理解整体架构分别有什么模块每个模块具体做什么 目录 1 服务器处理客户端请求 1.1 MySQL 服务器端逻辑架构说明 2 Connectors 3 第一层&#xff1a;连接层 3.1 数据库连接池(Conn…...

编程日记 2025/8/8 5:08:26

提升模型性能：数据增强与调优实战

‌一、为什么需要数据增强&#xff1f; 数据增强通过对训练图像进行‌随机变换‌&#xff0c;能够有效&#xff1a; 增加数据多样性&#xff0c;防止过拟合提升模型对不同视角、光照条件的鲁棒性在数据量不足时显著提升模型性能 二、MNIST手写数字识别实战‌ ‌1. 加载数据…...

编程日记 2025/8/8 5:11:53

Emacs 折腾日记(十八)——改变Emacs的样貌

截止到上一篇文章为止&#xff0c;之前教程 的内容都看完了&#xff0c;虽然它的后记部分提供了一些后续进阶的内容需要我们自己读手册。但是我不太想继续在elisp上死磕了。看着自己学了那么久的elisp&#xff0c;但是自己的emacs仍然没有半点改变&#xff0c;这个时候各位读者…...

编程日记 2025/8/7 15:04:04

VNA操作使用学习-14 再测晶振特性

再测一下4Mhz晶振&#xff0c;看看特性曲线&#xff0c;熟悉一下vna使用。 s11模式&#xff0c;找遍了各种format都无法显示&#xff0c;只有这一种&#xff08;s11&#xff0c;Resistance&#xff09;稍微显示出一个谐振&#xff0c;但是只有一个点。 s21模式 这是201p&#…...

编程日记 2025/8/8 4:24:50

CentOS7 离线下载安装 GitLab CE

依赖下载 https://vault.centos.org/7.9.2009/os/x86_64/Packages/policycoreutils-python-2.5-34.el7.x86_64.rpm 依赖安装 rpm -ivh policycoreutils-python-2.5-34.el7.x86_64.rpm 查看是否安装依赖 rpm -qa | grep policycoreutils-pythongitlab下载 https://packag…...

编程日记 2025/8/7 1:52:48

LeetCode 热题 100_跳跃游戏 II（79_45_中等_C++）(贪心算法)

LeetCode 热题 100_跳跃游戏 II&#xff08;79_45&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;思路一&#xff08;贪心选择&#xff09;&#xff1a; 代码实现代码实现&#xff08;思路一&#xff08;贪心算法&#xff09;…...

编程日记 2025/8/4 17:28:21

《Linux系统编程篇》Linux Socket 网络编程01 API介绍（Linux 进程间通信（IPC））——基础篇

文章目录 引言1. **创建Socket**2. **绑定Socket**3. **监听Socket**4. **接受客户端连接**5. **连接服务器**6. **发送数据**7. **接收数据**8. **发送数据&#xff08;UDP&#xff09;**9. **接收数据&#xff08;UDP&#xff09;**10. **关闭Socket**11. **设置/获取Socket选…...

编程日记 2025/8/4 6:19:43

系统思考—啤酒游戏经营决策沙盘模拟

再次感谢文华学院的邀请&#xff0c;为经纬集团管理层带来 《啤酒游戏经营决策沙盘》&#xff01; 很多朋友问&#xff1a;“最近是不是啤酒游戏上的少了&#xff1f;” 其实&#xff0c;真正的关键不是游戏本身&#xff0c;而是——如何让大家真正看见复杂系统中的隐性结构。 …...

编程日记 2025/8/5 17:24:49

利用设计模式构建事件处理系统

在现代软件开发中&#xff0c;设计模式提供了一种可重用的解决方案来解决常见的设计问题。在这篇博客中&#xff0c;我们将探讨如何利用模板方法模式、责任链模式、建造者模式以及线程安全设计来构建一个灵活且可扩展的事件处理系统。 设计模式及其应用 1. 模板方法模式 应用…...

编程日记 2025/8/7 9:59:16

ThreadLocal 的详细使用指南

一、ThreadLocal 核心原理 ThreadLocal 是 Java 提供的线程绑定机制&#xff0c;为每个线程维护变量的独立副本。其内部通过 ThreadLocalMap 实现&#xff0c;每个线程的 Thread 对象都有一个独立的 ThreadLocalMap&#xff0c;存储以 ThreadLocal 对象为键、线程局部变量为值…...

编程日记 2025/7/5 16:38:29

全员DeepSeek时代，前端能做些什么？

全员DeepSeek时代&#xff0c;前端能做些什么&#xff1f; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc #mermaid-svg-VNyL95jkz9jEXgUq {font-family:&…...

编程日记 2025/7/22 6:55:20

阿里云 AI 搜索产品荣获 Elastic Innovation Award 2024

阿里云AI搜索产品荣获Elastic Innovation Award 2024&#xff0c;该奖项于近日在新加坡ElasticON 2025的Elastic合作伙伴峰会上颁发&#xff0c;旨在表彰基于Elastic平台开发企业级生成式人工智能&#xff08;GenAI&#xff09;应用的顶尖合作伙伴&#xff0c;这些应用有效帮助…...

编程日记 2025/8/6 23:19:47

html5制作2048游戏开发心得与技术分享

2048游戏开发心得与技术分享 这里写目录标题 2048游戏开发心得与技术分享项目概述技术架构1. 核心技术栈2. 项目结构 核心功能实现1. 数据结构设计2. 移动逻辑实现3. 触摸支持 性能优化1. DOM操作优化2. 事件处理优化 开发心得1. 代码组织2. 调试技巧3. 用户体验优化 项目亮点技…...

编程日记 2025/8/7 5:19:50

AI日报 - 2025年3月21日

&#x1f31f; 今日概览&#xff08;60秒速览&#xff09; ▎&#x1f916; AGI突破 | OpenAI成立安全委员会&#xff0c;加速AGI治理框架构建 ▎&#x1f4bc; 商业动向 | 微软发布医疗大模型DAX Copilot 3.0&#xff0c;覆盖全球临床场景 ▎&#x1f4dc; 政策追踪 | 中国发布…...

编程日记 2025/8/7 11:45:58

MyBatis-Plus：告别手写 SQL 的高效之道

目录 1. MyBatis-plus 简介 2. MyBatis-Plus 快速上手 2.1 项目准备 2.2 导入 MyBatis-Plus 依赖 2.3 配置数据库连接 2.4 配置 MyBatis-Plus 日志打印 3. 使用 MyBatis-Plus 3.1 创建 model 类 3.2 创建 mapper 接口 3.3 MyBatis-Plus 映射机制 3.3.1 TableName &a…...

编程日记 2025/8/4 13:01:51

【AI News | 20250320】每日AI进展

AI Repos 1、servers 该仓库提供详细入门指南&#xff0c;用户可通过简单步骤连接Claude客户端&#xff0c;快速使用所有服务器功能。此项目由Anthropic管理&#xff0c;展示MCP的多样性与扩展性&#xff0c;助力开发者为大语言模型提供安全、可控的工具与数据访问。 2、awe…...

编程日记 2025/8/2 13:19:19

让“树和二叉树”埋在记忆土壤中--性质和概念

Nice to meet your! 目录 树的介绍&#xff1a; 树的创建&#xff1a; 二叉树的概念和结构&#xff1a; 二叉树的存储结构&#xff1a; 树的介绍&#xff1a; 概念和结构&#xff1a; 不知你们是否在现实中看见过分为两个叉的枯树&#xff0c;大概长这样&#xff1a; 那…...

编程日记 2025/7/30 22:51:39